/* Küçük Şehzade · little-sultan — Atölye #4 (#397, Mina).
   Contract: docs/tasarim/v2/yon.md §2 row 4, §3 (ceremonial), §4. Selectors: [data-theme] + .inv-cover only.
   Readability: large (body 19 px, date 17 px). */

[data-theme="little-sultan"] {
  /* yon.md §4.1 (1): this theme owns the whole cover composition; page.js sets <body data-cover="theme"> */
  --inv-cover-owned: 1;

  --inv-bg: #FBF6EC;
  --inv-surface: #FFFFFF;
  --inv-text: #1F2A3A;
  --inv-text-muted: #55606F;
  --inv-primary: #0F6E78;
  --inv-on-primary: #FFFFFF;
  --inv-accent: #D6A443;
  --inv-ornament: #2A8C95;
  --inv-border: #E3D8C2;
  --inv-backdrop: #F3EBDB;
  --inv-danger: #B3261E;
  --inv-focus: var(--inv-text);

  --inv-font-script: 'Cormorant Garamond', Georgia, serif; /* name: 700, large */
  --inv-font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --inv-font-body: 'Nunito', system-ui, sans-serif;
  /* yon.md §4.1/12: Cinzel's "1" reads as "I" → dates, counters, stepper and calendar leaf use Cormorant lining figures */
  --inv-font-numeric: 'Cormorant Garamond', Georgia, serif;
  --inv-display-weight: 700;
  --inv-display-transform: none;
  --inv-display-tracking: .06em;
  --inv-body-size: 1.1875rem;
  --inv-radius: 6px;

  /* motion: ceremonial (yon.md §3 column "Törensel") */
  --inv-motion-intro-total: 2600ms;
  --inv-motion-ease-open: var(--ease-in-out);
  --inv-motion-name-in: 800ms;
  --inv-motion-reveal: 600ms;
  --inv-motion-reveal-distance: 12px;
  --inv-motion-stagger: 80ms;
  --inv-motion-micro: 180ms;
  --inv-motion-ambient: dust;

  /* yon.md §4.1/11: the column behind section text gets the soft tile (pattern at 8 % over --inv-bg);
     the full-strength çini stays on the cover and the intro only (--ls-art-tile, theme-local) */
  --inv-art-backdrop: url("/themes/little-sultan/art/tile-soft.svg");
  --inv-art-column: url("/themes/little-sultan/art/tile-soft.svg");
  --ls-art-tile: url("/themes/little-sultan/art/tile.svg");
  --inv-art-scene: url("/themes/little-sultan/art/scene.svg");
  --inv-art-scene-1x: url("/themes/little-sultan/art/scene.svg");
  --inv-art-flank-left: url("/themes/little-sultan/art/flank-left.svg");
  --inv-art-flank-right: url("/themes/little-sultan/art/flank-right.svg");
  --inv-art-divider: url("/themes/little-sultan/art/divider.svg");
  --inv-art-corner: url("/themes/little-sultan/art/corner.svg");
  --inv-art-icon-schedule: url("/themes/little-sultan/art/icon-schedule.svg");
  --inv-art-icon-rsvp: url("/themes/little-sultan/art/icon-rsvp.svg");
  --inv-art-icon-gift: url("/themes/little-sultan/art/icon-gift.svg");
  --inv-art-icon-gallery: url("/themes/little-sultan/art/icon-gallery.svg");
  --inv-art-icon-guestbook: url("/themes/little-sultan/art/icon-guestbook.svg");
  --inv-art-icon-share: url("/themes/little-sultan/art/icon-share.svg");
}

/* ---- Cover: the prince under the çini arch; name, date and place in the arch sky ---- */
[data-theme="little-sultan"] .inv-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-3);
  /* #432 D-059: text starts at y = 190 of the 844-unit scene (task 1421: name group starts at >= 22% of the cover) (arch sky 262 units wide there); --ls-u = 1 scene unit */
  --ls-u: calc(100svh / 844);
  padding: calc(190 * var(--ls-u)) var(--space-6) 50svh;
  text-align: center;
  color: var(--inv-text);
}
[data-theme="little-sultan"] .inv-cover__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* scene keeps its height (prince never cropped); tiles fill any side gap */
  background: var(--inv-art-scene) 50% 100% / auto 100% no-repeat, var(--ls-art-tile) 0 0 / 40px 40px repeat;
}
[data-theme="little-sultan"] .inv-cover__eyebrow {
  margin: 0;
  max-width: calc(200 * var(--ls-u)); /* stays inside the pointed arch: wraps to 2 lines */
  text-wrap: balance;
  font: var(--inv-display-weight) .8125rem/1.4 var(--inv-font-display);
  letter-spacing: var(--inv-display-tracking);
  color: var(--inv-primary);
}
[data-theme="little-sultan"] .inv-cover__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .25em;
  margin: 0;
  /* #432 D-059: the name box is tied to the arch scale, so it keeps >= 12 px from the inner arch edge at any size and
     with long names ("Ömer Faruk Yılmazoğlu" wraps to 2 lines): width = arch sky width at the names' top (262 units)
     minus 2 x 19 px; font = 44 units (44 px at 390x844, 47 px at 1440x900, 53 px at 768x1024), 40-60 px. */
  justify-self: center;
  max-width: calc(262 * var(--ls-u) - 24px);
  font: 700 clamp(3.25rem, 52 * var(--ls-u), 3.75rem)/1.05 var(--inv-font-script);
  text-wrap: balance;
  color: var(--inv-primary);
}
[data-theme="little-sultan"] .inv-cover__date {
  background: color-mix(in srgb, var(--inv-bg) 84%, transparent); padding: var(--space-1) var(--space-3); /* görev 679: görsel üstünde AA */
  margin: var(--space-1) 0 0;
  /* Cinzel = the plain sibling of Cinzel Decorative: no swash H, dotted İ via uppercase + lang="tr" */
  font: 700 var(--inv-text-date)/1.4 var(--inv-font-numeric); /* 17 px Cormorant 700, lining figures: "12" never reads "I2" (§4.1/12) */
  font-variant-numeric: lining-nums;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--inv-text);
}
[data-theme="little-sultan"] .inv-cover__venue {
  margin: 0;
  background: color-mix(in srgb, var(--inv-bg) 84%, transparent); padding: var(--space-1) var(--space-3); /* görev 678: görsel üstünde AA */
  font: 500 1.0625rem/1.45 var(--inv-font-body);
  color: var(--inv-text-muted);
}
[data-theme="little-sultan"] .inv-cover__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5svh;
  translate: -50% 0;
  /* #437: the call sits on the prince's dark robe (#1F2A3A = text colour, contrast 1.0) → own pill ground:
     --inv-surface + 1 px --inv-border, text on it 14.3:1; row layout keeps the pill one line high (44 px) */
  padding: var(--space-2) var(--space-4);
  background: var(--inv-surface);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-decoration: none;
  font: 600 .875rem/1 var(--inv-font-body);
  color: var(--inv-text);
}
[data-theme="little-sultan"] .inv-cue__dot { background: var(--inv-primary); }

/* §4.1 (1): page markup wraps the cover text in .inv-cover__content and splits the date into day + time.
   The wrapper is dissolved so the cover grid above places every line itself. */
[data-theme="little-sultan"] .inv-cover__content { display: contents; }
[data-theme="little-sultan"] .inv-cover__date time { display: block; }
[data-theme="little-sultan"] .inv-cover__day { display: block; }
[data-theme="little-sultan"] .inv-cover__time { display: block; margin-top: .3em; font-size: var(--inv-text-time-min); color: var(--inv-text-muted); }
[data-theme="little-sultan"] .inv-cover__guest, [data-theme="little-sultan"] .inv-cover__badge { margin: 0; font: 400 1rem/1.4 var(--inv-font-body); color: var(--inv-text-muted); }
/* Page rules may still reach the cover until page.css scopes them to body:not([data-cover="theme"]) — keep the theme's own flow. */
[data-theme="little-sultan"] .inv-cover__names { flex-direction: row; }
@media (min-width: 1024px) { [data-theme="little-sultan"] .inv-cover { width: auto; margin-inline: 0; } }

/* Görev 1527: uzun adda kapak uzar ve 190 birimlik üst dolgu %22'nin altına düşerdi; alt pay daralır, metin bloğu bandın içinde kalır. */
[data-theme="little-sultan"] .inv-cover:has(.inv-cover__names[data-name-long]) { padding-bottom: 20svh; }