/* A member's own look on a library page (src/lib/funnels/library/look.ts).
   Loaded after the design and its sales page stylesheet, so a member's choice wins. */

/* ── Words: colour, highlight, bold, italic ───────────────────────────── */
.le-h { padding: 0 .16em; border-radius: .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
strong.le-b { font-weight: 700; }
em.le-i { font-style: italic; }

/* ── Backgrounds: colour or photo, with readable words ────────────────── */
html[data-suite]:not(#_le) .screen [data-le-bg] { background: var(--le-bg) !important; color: var(--le-fg) !important; }
html[data-suite]:not(#_le) .screen :is([data-le-bg], [data-le-fg]) :is(h1, h2, h3, h4, p, li, summary, small, dt, dd, label, blockquote, .eyebrow, .lede, .fine, .rule-label, .wl-kicker, .t, .d, .n, em:not(.le-i), a.text-link, a.secondary, a.nav-link) { color: inherit !important; }
html[data-suite]:not(#_le) .screen [data-le-fg] { color: var(--le-fg) !important; }
/* Forms and booking panels sit on their own card, so they keep the design's text colour. */
html[data-suite]:not(#_le) .screen :is([data-le-bg], [data-le-fg]) :is(.capture, .booking-panel) { color: var(--ink) !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-bg]:not(.closing) { padding-bottom: clamp(72px, 9vw, 128px) !important; border: 0 !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-bg]:not(.closing) + .script-section:not([data-le-bg]) { margin-top: 0 !important; }
html[data-suite]:not(#_le) .screen [data-le-bg="photo"] { background-color: #222 !important; }
/* A top that is a box inside the page (most heroes) keeps some air round its words. */
html[data-suite]:not(#_le) .screen div[data-le-top][data-le-bg] { padding: clamp(28px, 4vw, 60px) !important; border-radius: clamp(14px, 2vw, 28px); }

/* ── The artwork ──────────────────────────────────────────────────────── */
html[data-suite]:not(#_le) .screen [data-le-art="hide"] { display: none !important; }
html[data-suite]:not(#_le) .screen [data-le-noart] { grid-template-columns: minmax(0, 1fr) !important; }
html[data-suite]:not(#_le) .screen [data-le-noart] .hero-copy { max-width: 820px; }
html[data-suite]:not(#_le) .screen [data-le-art="photo"] { background: var(--le-art) center / cover no-repeat !important; min-height: clamp(320px, 42vw, 580px); }
html[data-suite]:not(#_le) .screen [data-le-art="photo"] > * { display: none !important; }
html[data-suite]:not(#_le) .screen [data-le-art="photo"]::before, html[data-suite]:not(#_le) .screen [data-le-art="photo"]::after { display: none !important; }

/* ── The design's picture spots ───────────────────────────────────────── */
html[data-suite]:not(#_le) .screen [data-le-ph] { background: var(--le-ph) center / cover no-repeat !important; }
html[data-suite]:not(#_le) .screen [data-le-ph] > * { visibility: hidden; }

/* ── Photos in a section ──────────────────────────────────────────────── */
.le-photo { margin: 0; }
.le-photo img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: clamp(10px, 1.6vw, 22px); }
.le-photo-above { margin-bottom: clamp(28px, 4vw, 48px); }
.le-photo-above img { aspect-ratio: 16 / 8; }
.le-photo-below { margin-top: clamp(28px, 4vw, 48px); }
.le-photo-below img { aspect-ratio: 16 / 8; }
.le-photo-beside img { aspect-ratio: 4 / 5; }
html[data-suite=rally]:not(#_le) .le-photo img, html[data-suite=blueprint]:not(#_le) .le-photo img, html[data-suite=atelier]:not(#_le) .le-photo img { border-radius: 0; }
html[data-suite=rally]:not(#_le) .le-photo img { border: 3px solid var(--ink); }
html[data-suite=grove]:not(#_le) .le-photo-beside img, html[data-suite=petal]:not(#_le) .le-photo-beside img { border-radius: 999px 999px 14px 14px; }
html[data-suite=confetti]:not(#_le) .le-photo img { border: 2px solid var(--ink); box-shadow: 6px 8px 0 var(--ink); }

/* ── Section layouts: the design's own, or one of three plain ones ────── */
html[data-suite]:not(#_le) .screen .script-section[data-le-layout]:not(.closing) .script-copy { display: block !important; text-align: left; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout]:not(.closing) :is(h2, .script-body, .script-body > p) { text-align: inherit !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout]:not(.closing) .script-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }

html[data-suite]:not(#_le) .screen .script-section[data-le-layout=centred]:not(.closing) .script-copy { text-align: center !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout=centred]:not(.closing) h2 { margin-inline: auto !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout=centred]:not(.closing) h2::before { margin-inline: auto !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout=centred]:not(.closing) .script-body { max-width: 720px !important; margin-inline: auto !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout=centred]:not(.closing) .script-body > p { margin-inline: auto !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout=centred]:not(.closing) :is(.script-list, .benefits, details) { text-align: left; }

html[data-suite]:not(#_le) .screen .script-section[data-le-layout=stacked]:not(.closing) :is(h2, h2::before) { margin-inline: 0 !important; }
html[data-suite]:not(#_le) .screen .script-section[data-le-layout=stacked]:not(.closing) .script-body { max-width: 780px !important; margin: 0 !important; }

@media (min-width: 900px) {
  html[data-suite]:not(#_le) .screen .script-section[data-le-layout=split]:not(.closing) .script-copy { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; column-gap: clamp(40px, 7vw, 110px) !important; align-items: start; }
  html[data-suite]:not(#_le) .screen .script-section[data-le-layout=split]:not(.closing) .script-copy > h2 { grid-column: 1; grid-row: 1; margin-inline: 0 !important; }
  html[data-suite]:not(#_le) .screen .script-section[data-le-layout=split]:not(.closing) .script-copy > .script-body { grid-column: 2; grid-row: 1 / span 3; max-width: none !important; margin: 0 !important; }

  /* A photo beside the words: words left, photo right. */
  html[data-suite]:not(#_le) .screen .script-section[data-le-photo=beside]:not(.closing) .script-copy { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: clamp(36px, 6vw, 96px) !important; align-items: center; }
  html[data-suite]:not(#_le) .screen .script-section[data-le-photo=beside]:not(.closing) .script-copy > .le-photo { grid-column: 2; grid-row: 1 / span 4; }
  html[data-suite]:not(#_le) .screen .script-section[data-le-photo=beside]:not(.closing) .script-copy > :not(.le-photo) { grid-column: 1; }
  html[data-suite]:not(#_le) .screen .script-section[data-le-photo=beside]:not(.closing) .script-copy > .script-body { grid-row: auto; }
  html[data-suite]:not(#_le) .screen .script-section[data-le-photo=beside]:not(.closing) .script-list { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 899px) {
  .le-photo-beside { margin-bottom: 28px; }
  .le-photo-beside img { aspect-ratio: 4 / 3; }
}

/* A home page's introduction above the offer cards (Meet me, Find your starting point).
   Styled where it stands: words and photo share the column the design gives it. */
html[data-suite]:not(#_le) .screen .intro[data-le-photo] { max-width: none; }
html[data-suite]:not(#_le) .screen .intro[data-le-layout=centred] { text-align: center; }
html[data-suite]:not(#_le) .screen .intro[data-le-layout=stacked] { text-align: left; }
@media (min-width: 900px) {
  html[data-suite]:not(#_le) .screen .intro[data-le-photo=beside] { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 6vw, 96px); align-items: center; text-align: left; }
  html[data-suite]:not(#_le) .screen .intro[data-le-photo=beside] > .le-photo { grid-column: 2; grid-row: 1 / span 6; max-width: 420px; justify-self: end; width: 100%; }
  html[data-suite]:not(#_le) .screen .intro[data-le-photo=beside] > :not(.le-photo) { grid-column: 1; margin-inline: 0; }
}
@media (max-width: 899px) {
  html[data-suite]:not(#_le) .screen .intro[data-le-photo=beside] > .le-photo { margin-bottom: clamp(20px, 5vw, 32px); max-width: 360px; }
}