/* Native component layout and typography live in Atomic global classes.
   Retained CSS: decoration, state/descendant rules and breakpoint exceptions. */
.lcsg .lc-block-demo { display: flex; flex-direction: column; gap: 18px; padding-block: 20px 32px; }
.lcsg :where(.lc-block-toolbar) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.lcsg :where(.lc-block-label) { font: 600 12px/1.5 'DM Sans',sans-serif; }
.lcsg :where(.lc-block-split) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(28px,5vw,72px); }
.lcsg :where(.lc-block-copy) { gap: 20px; max-width: 42rem; }
.lcsg :where(.lc-block-title) { text-wrap: balance; }
.lcsg :where(.lc-block-photo-frame) { min-width: 0; overflow: hidden; border-radius: 30px; }
.lcsg :where(.lc-block-photo img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.lcsg :where(.lc-block-photo--scallop) { aspect-ratio: 1; mask: url('shapes/expressive/scalloped-star.svg') center/contain no-repeat; -webkit-mask: url('shapes/expressive/scalloped-star.svg') center/contain no-repeat; }
.lcsg :where(.lc-block-grid) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.lcsg :where(.lc-info-card) { gap: 18px; min-width: 0; }
.lcsg :where(.lc-block-number) { font: 500 16px/1.4 'DM Sans',sans-serif; color: var(--lc-burnt-orange,#9b4a25); }
.lcsg :where(.lc-block-cta, .lc-surface-grain) { position: relative; isolation: isolate; overflow: hidden; }
.lcsg :where(.lc-surface-grain)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--lc-grain-wash,radial-gradient(ellipse at 100% 100%,#f5a45d24,transparent 65%)),url('backgrounds/fine-grain.svg'); opacity: var(--lc-grain-opacity,.55); }
.lcsg :where(.lc-surface-grain--quiet) { --lc-grain-opacity: .18; --lc-grain-wash: linear-gradient(135deg,#ffffff25,transparent); }
.lcsg :where(.lc-block-cta .lc-block-photo-frame) { border-radius: 0; overflow: visible; }
.lcsg :where(.lc-block-actions) { gap: 16px 28px; }
.lcsg :where(.lc-block-band) { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.lcsg :where(.lc-class-reference) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.lcsg .lc-class-note { padding: 24px; background: #fff; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.lcsg :where(.lc-class-note code) { font-size: .9em; }
.lcsg .lcsg-preview-toggle:disabled { opacity: .6; cursor: default; }
@media (max-width: 900px) {
  .lcsg :where(.lc-block-grid) { grid-template-columns: 1fr; }
  .lcsg :where(.lc-block-split) { gap: 28px; }
  .lcsg :where(.lc-block-band) { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767px) {
  .lcsg :where(.lc-block-split, .lc-class-reference) { grid-template-columns: 1fr; }
  .lcsg :where(.lc-block-photo--scallop) { aspect-ratio: 1; max-width: 440px; margin-inline: auto; }
  .lcsg :where(.lc-block-actions) { flex-direction: column; }
}
.lcsg :where(.lc-block-photo-frame--mask) { border-radius: 0; }
.lcsg :where(.lc-block-photo--corners) { mask: url('shapes/expressive/balanced-corners.svg') center/100% 100% no-repeat; -webkit-mask: url('shapes/expressive/balanced-corners.svg') center/100% 100% no-repeat; }
.lcsg :where(.lc-block-photo--clover) { mask: url('shapes/expressive/clover.svg') center/contain no-repeat; -webkit-mask: url('shapes/expressive/clover.svg') center/contain no-repeat; }
.lcsg :where(.lc-card-photo) { aspect-ratio: 1; align-self: stretch; margin-bottom: 8px; }
.lcsg .lc-surface-grain .lc-block-number { color: inherit; }
.lcsg :where(.lc-info-list) { gap: 0; }
.lcsg :where(.lc-info-row) { align-items: center; gap: 28px; }
.lcsg :where(.lc-info-row + .lc-info-row) { border-top: 1px solid color-mix(in srgb,var(--lc-brand-1,#1a305b) 18%,transparent); }
.lcsg :where(.lc-info-row .lc-companion-link) { justify-self: start; white-space: nowrap; }
@media (max-width: 1100px) {
  .lcsg :where(.lc-info-row) { grid-template-columns: 2rem minmax(0,1fr); gap: 16px 24px; }
  .lcsg :where(.lc-info-row > :nth-child(n+3)) { grid-column: 2; }
}
@media (max-width: 767px) {
  .lcsg :where(.lc-info-row) { gap: 14px; }
  .lcsg :where(.lc-card-photo) { aspect-ratio: 1; max-width: 440px; margin-inline: auto; }
  .lcsg :where(.lc-info-row .lc-companion-link) { white-space: normal; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  .lcsg .lc-info-row { grid-template-columns: 2rem minmax(0,1fr); }
}