/* Special days at the top of the home page (app/Views/Home/_special.php; the design framework is
   app/SpecialDays/Views/home/banner.php; how to add a design: docs/special-days/designs.md).
   Labels arrive uppercased by the server (Turkish rules), so nothing here changes case.

   Layout (owner, Oct 31): a banner is full width on its set's ground colour, and the edge bands are full-bleed, but the words and the art sit
   on the site's own container (the stage carries Bootstrap's .container, like the normal hero): the text starts on the TACA logo line and
   the art ends on the Donate button's right edge. Below 992 px the layout is the phone one: with buttons, the text and buttons first and
   the art (at most 160 px) after them; without buttons, the art first (200 to 240 px tall, centred), then the text. Gutter 12 px, as the
   rest of the page. Buttons are pills, like .btn in modern.css. Type: Source Serif 4 headings, Inter for the rest. */

/* ---------- Event and School days with no design keep the story-hero look ---------- */
.sd-hero .sd-label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.88); text-transform: none; overflow-wrap: anywhere; }
.sd-hero .sd-this-year { margin: .9rem 0 0; font-size: 1rem; color: rgba(255,255,255,.88); max-width: 60ch; }
.sd-hero.story-hero p.lead + p.lead { margin-top: .6rem; }
.sd-hero.story-hero .story-where a { color: #fff; }
/* A later turn's headline is an h2 (several days, or the next event, taking turns, below): the same look as the h1 (modern.css .story-hero h1). */
.sd-hero.story-hero h2, .home-top--special .story-hero h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin: .6rem 0 .9rem; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 575px) { .sd-hero .sd-label { font-size: 12px; } }

/* ---------- The banner: shared by every design ---------- */
.sd-banner {
  --sd-ground: #F7F0E4; --sd-ink: #1D1D1F; --sd-label: #9E0C24; --sd-body: #4B4B50; --sd-h1: var(--sd-ink);
  --sd-copy-left: 0px; --sd-copy-top: 0px; --sd-copy-bottom: 0px;
  --sd-c: 100%; /* the container's width at this breakpoint (Bootstrap's: 960 / 1140 / 1320 from 992 / 1200 / 1400 px) */
  position: relative; overflow: hidden; box-sizing: border-box; margin: 0; padding: 0; background: var(--sd-ground); color: var(--sd-ink);
  font-family: Inter, system-ui, sans-serif;
}
.sd-banner *, .sd-banner *::before, .sd-banner *::after { box-sizing: border-box; }
.sd-stage { /* also .container: its width, margins and 12 px side padding are the site's; only the vertical padding is ours */
  position: relative; min-height: 440px; display: flex; align-items: center;
  padding-top: var(--sd-copy-top); padding-bottom: var(--sd-copy-bottom);
}
@media (min-width: 576px)  { .sd-banner { --sd-c: 540px; } }
@media (min-width: 768px)  { .sd-banner { --sd-c: 720px; } }
@media (min-width: 992px)  { .sd-banner { --sd-c: 960px; } }
@media (min-width: 1200px) { .sd-banner { --sd-c: 1140px; } }
@media (min-width: 1400px) { .sd-banner { --sd-c: 1320px; } }
.sd-copy { position: relative; min-width: 0; margin-left: var(--sd-copy-left); width: min(620px, calc(100% - var(--sd-copy-left) - 540px)); }

/* Art: the design's art SVG sets --sd-right and --sd-top or --sd-bottom on itself. Its right edge is at most the Donate button's right edge
   (the container minus its 12 px gutter); a design drawn further in than the 1280 canvas's 32 px margin keeps the difference. */
.sd-art { position: absolute; display: block; right: calc((100% - var(--sd-c)) / 2 + 12px + max(0px, var(--sd-right, 32px) - 32px)); top: var(--sd-top, auto); bottom: var(--sd-bottom, auto); }
.sd-art--photo { top: 50%; bottom: auto; width: 468px; height: 340px; transform: translateY(-50%); }
.sd-art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.sd-quiet .sd-art--photo img { filter: grayscale(1); }
/* Edge band: full-bleed, at the bottom; .sd-edge--top puts it along the top (the folk sets' kilim band, 23 Nisan's bunting). */
.sd-edge { position: absolute; left: 0; bottom: 0; width: 100%; display: block; }
.sd-edge--top { top: 0; bottom: auto; }

.sd-label { margin: 0; font: 600 13px/1.5 Inter, system-ui, sans-serif; letter-spacing: .12em; color: var(--sd-label); }
.sd-nw { display: inline-block; max-width: 100%; vertical-align: top; } /* a label part stays on one line unless it is wider than the screen */
.sd-copy :is(h1, h2) {
  margin: 16px 0 0; font-family: 'Source Serif 4', Georgia, serif; font-optical-sizing: auto; font-weight: 700; font-size: 44px; line-height: 1.14;
  text-wrap: balance; color: var(--sd-h1); overflow-wrap: break-word;
}
.sd-num { color: #C8102E; }
.sd-line { margin: 16px 0 0; font: 400 19px/1.5 Inter, system-ui, sans-serif; color: var(--sd-body); text-wrap: pretty; }
.sd-this-year { margin: 12px 0 0; font: 600 16px/1.5 Inter, system-ui, sans-serif; color: var(--sd-body); }
.sd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sd-copy .sd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid #C8102E; font: 600 16px/1.2 Inter, system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer;
}
.sd-copy .sd-btn--fill { background: #C8102E; color: #FFFFFF; }
.sd-copy .sd-btn--outline { background: transparent; color: #9E0C24; }
.sd-copy .sd-btn--fill:hover { background: #9E0C24; border-color: #9E0C24; color: #FFFFFF; }
.sd-copy .sd-btn--outline:hover { background: #9E0C24; border-color: #9E0C24; color: #FFFFFF; }
.sd-copy .sd-btn:focus-visible { outline: 3px solid var(--sd-ink); outline-offset: 3px; }

/* The set's divider: exactly one, 12 px tall, under the label. */
.sd-divider { display: flex; align-items: center; height: 12px; margin-top: 12px; }
.sd-divider--national { gap: 6px; }
.sd-divider--national span:nth-child(1) { width: 56px; height: 3px; background: #C8102E; }
.sd-divider--national span:nth-child(2) { width: 6px; height: 6px; transform: rotate(45deg); background: #A9822A; }
.sd-divider--national span:nth-child(3) { width: 18px; height: 3px; background: #C8102E; }
.sd-divider--rule { display: block; width: 56px; background: linear-gradient(#c8102e, #c8102e) 0 5px / 56px 2px no-repeat; }
.sd-divider--cetvel { display: block; overflow: visible; }
.sd-dv-line { fill: none; stroke: #B8892F; stroke-width: 1.2; }
.sd-dv-gem { fill: #c8412f; stroke: #B8892F; stroke-width: 1; }
.sd-dv-dots { fill: none; stroke: #1d3d8f; stroke-width: 3; stroke-linecap: round; }
.sd-divider--kilim { gap: 10px; width: 50px; padding-left: 2px; }
.sd-divider--kilim span { display: block; width: 8px; height: 8px; transform: rotate(45deg); }
.sd-divider--kilim span:nth-child(1) { background: #C8102E; }
.sd-divider--kilim span:nth-child(2) { background: #e3a72f; }
.sd-divider--kilim span:nth-child(3) { background: #22355e; }
.sd-divider--taca { gap: 8px; width: 84px; }
.sd-divider--taca span:nth-child(odd) { width: 28px; height: 1.5px; background: #B8892F; }
.sd-divider--taca span:nth-child(2) { width: 8px; height: 8px; transform: rotate(45deg); background: #C8102E; }

/* ---------- Sets ---------- */
/* National: paper ground, red divider; a gold line over a red band at the bottom. */
.sd-set-national { --sd-copy-bottom: 16px; }
.sd-set-national::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(to bottom, #A9822A 0 2px, transparent 2px 4px, #C8102E 4px 100%); }

/* Quiet (banner.php sets sd-quiet for the remembrance set and Memorial Day's us-dark): charcoal, serif, a double frame, never loud. Remembrance has no buttons. */
.sd-quiet { --sd-ground: #151516; --sd-ink: #f3efe6; --sd-label: #b8b2a5; --sd-body: #d4cfc4; }
/* The double frame sits 28 px outside the container lines (the text's and the art's), never closer than 6 px to the screen edge; the text keeps the logo line. */
.sd-quiet::before { content: ""; position: absolute; inset: 16px max(6px, calc((100% - var(--sd-c)) / 2 + 12px - 28px)); border: 3px double #45433e; pointer-events: none; }
.sd-quiet .sd-copy :is(h1, h2) { font-weight: 500; font-size: 38px; line-height: 1.2; }
.sd-quiet .sd-line { font: italic 400 22px/1.4 'Source Serif 4', Georgia, serif; font-optical-sizing: auto; }
.sd-quiet .sd-this-year { font-family: 'Source Serif 4', Georgia, serif; font-weight: 400; font-style: italic; }

/* On phones the frame keeps clear of the text (which stays on the 12 px page line): double rules along the top and bottom only. */
@media (max-width: 575px) { .sd-quiet::before { left: 0; right: 0; border-left: 0; border-right: 0; } }

/* Religious (Bayram: light, tile blue; Kandil: midnight and gold): a tile frieze along the bottom. */
.sd-set-religious { --sd-ink: #13285C; --sd-copy-bottom: 36px; border-top: 4px solid #1d3d8f; }
.sd-set-religious .sd-stage { min-height: 436px; }
.sd-set-religious .sd-copy :is(h1, h2) { font-weight: 600; }
/* the lamps' glow fades out instead of stopping at the art's box */
.sd-variant-kandil .sd-art { overflow: visible; }
.sd-variant-kandil { --sd-ground: #10193A; --sd-ink: #f8f0de; --sd-label: #e6c77c; --sd-body: #D9D1BF; border-top: 0; }
.sd-variant-kandil .sd-stage { min-height: 440px; }
.sd-variant-kandil .sd-dv-line { stroke: #c9a24a; stroke-width: 1; }
.sd-variant-kandil .sd-dv-gem { stroke: #e6c77c; }
.sd-variant-kandil .sd-dv-dots { stroke: #e6c77c; }
.sd-variant-kandil .sd-btn--fill { background: #E6C77C; border-color: #E6C77C; color: #10193A; }
.sd-variant-kandil .sd-btn--outline { border-color: #E6C77C; color: #E6C77C; }
.sd-variant-kandil .sd-btn--fill:hover, .sd-variant-kandil .sd-btn--outline:hover { background: #F6DC98; border-color: #F6DC98; color: #10193A; }

/* Folk: a zigzag-and-kilim band along the top. */
.sd-set-folk { --sd-copy-top: 20px; }
/* Father's Day has its kilim band along the bottom (24 px) instead of the top, so its text centres between the top and that band. */
.sd-set-folk.sd-design-fathers-day { --sd-copy-top: 0px; --sd-copy-bottom: 24px; }

/* TACA: a kilim band along the bottom. */
.sd-set-taca { --sd-copy-bottom: 36px; }

/* US (Independence Day, Thanksgiving, Veterans Day: paper ground, navy and red, a kilim band along the bottom; Memorial Day is the dark variant:
   the quiet look, with no band). */
.sd-set-us { --sd-copy-bottom: 36px; }
.sd-set-us .sd-divider--us { display: block; }
.sd-set-us.sd-variant-dark { --sd-copy-bottom: 0px; }

/* Photo: the day's photo fills the banner under a dark overlay (text at 4.5:1 or better over any picture). */
.sd-has-photo-bg { --sd-ink: #FFFFFF; --sd-label: #FFE9A8; --sd-body: #F4F4F4; background-color: #151516; background-image: linear-gradient(rgba(10, 10, 12, .66), rgba(10, 10, 12, .66)), var(--sd-photo); background-size: cover; background-position: center; }
.sd-has-photo-bg .sd-btn--outline { border-color: #FFFFFF; color: #FFFFFF; }
.sd-has-photo-bg .sd-btn--outline:hover { background: #FFFFFF; border-color: #FFFFFF; color: #1D1D1F; }

/* ---------- Phone and tablet (below 992 px) ---------- */
@media (max-width: 991px) {
  .sd-banner { display: flex; flex-direction: column; min-height: 520px; }
  .sd-art { position: static; order: 1; align-self: center; height: var(--sd-phone-h, 224px); width: auto; max-width: calc(100% - 24px); margin: 20px 0 0; }
  .sd-art--photo { width: calc(100% - 24px); max-width: 560px; height: 220px; transform: none; margin: 20px 12px 0; }
  /* A day with buttons: the text and buttons come first (the Tickets button must be on the first screen), then the art, small. */
  .sd-has-actions .sd-art { order: 4; height: min(var(--sd-phone-h, 224px), 160px); margin: 4px 0 24px; }
  .sd-has-actions .sd-art--photo { height: 160px; margin: 4px 12px 24px; }
  .sd-has-actions.sd-set-taca .sd-edge { order: 5; }
  .sd-edge { --sd-z: .6667; zoom: var(--sd-z); position: static; order: 9; width: calc(100% / var(--sd-z)); max-width: none; margin-top: auto; }
  .sd-edge--top { order: 0; margin-top: 0; }
  .sd-set-taca { border-bottom: 6px solid #C8102E; }
  .sd-set-taca .sd-edge { order: 2; margin-top: 0; }
  .sd-stage { order: 3; display: block; width: 100%; min-height: 0; padding-top: 0; padding-bottom: 0; } /* the container's 12 px gutter is the text's */
  .sd-copy { margin: 0; width: 100%; max-width: none; padding: 16px 0 28px; }
  .sd-set-national .sd-copy { padding-bottom: 44px; }
  .sd-has-photo-bg .sd-stage { display: flex; flex: 1 1 auto; align-items: center; }
  .sd-has-photo-bg .sd-copy { padding-top: 40px; padding-bottom: 40px; }
  .sd-set-national::after { background: linear-gradient(to bottom, #A9822A 0 2px, transparent 2px 10px, #C8102E 10px 100%); }
  .sd-quiet .sd-art { margin-top: 30px; }
  .sd-quiet .sd-copy { padding: 24px 0 40px; }
  .sd-quiet::before { top: 10px; bottom: 10px; }
  .sd-design-turkish-heritage-month .sd-edge { order: 9; margin-top: auto; }
  .sd-set-religious .sd-stage, .sd-variant-kandil .sd-stage { min-height: 0; }
  .sd-label { font-size: 12px; letter-spacing: .1em; }
  .sd-copy :is(h1, h2) { font-size: 28px; line-height: 1.18; }
  .sd-quiet .sd-copy :is(h1, h2) { font-size: 25px; line-height: 1.22; }
  .sd-line { font-size: 16px; }
  .sd-quiet .sd-line { font-size: 18px; }
  .sd-this-year { font-size: 15px; }
  .sd-copy .sd-btn { flex: 1 1 auto; padding: 0 20px; }
  .sd-divider--national span:nth-child(1) { width: 44px; }
  .sd-divider--national span:nth-child(2) { width: 5px; height: 5px; }
  .sd-divider--national span:nth-child(3) { width: 14px; }
}

/* ---------- Several days at once take turns (Views/Home/_hero.php, owner Nov 1 2026) ---------- */
/* The home pictures' script (home-top.js) turns them; home-top.css is not linked here, so these rules are all the rotation has.
   Each banner keeps its full-width look; the cards sit below them on the site's container, on the rotation's dark wine band,
   in a row that wraps on phones (the same cards as the home pictures). Without scripts only the first banner is in the page
   and the cards (whose #links would do nothing) are hidden. */
.home-top--special { background: #2a0710; color: #fff; }
.home-top--special [hidden] { display: none !important; }
.home-top--special:not(.is-enhanced) .home-top-nav { display: none; }
.home-top--special.is-enhanced .home-top-panel:not(.is-current) { display: none; }
.home-top--special .home-top-size { display: none; }
.home-top--special .home-top-size * { transition: none; }
.home-top--special .home-top-size .sd-banner { background-image: none; } /* the size copy never fetches a day's photo early */
.home-top--special .home-top-panel { scroll-margin-top: 140px; } /* a tapped card brings its banner into view below the sticky header */
/* Desktop: inert, media-free copies of every banner share one grid cell, so the tallest one sets the height and nothing jumps;
   a shorter banner fills it, its words centred. */
@media (min-width: 768px) {
  .home-top--special.is-enhanced .home-top-panels { display: grid; }
  .home-top--special.is-enhanced .home-top-panel, .home-top--special .home-top-size { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
  .home-top--special.is-enhanced .home-top-panel:not(.is-current) { display: none; }
  .home-top--special.is-enhanced .home-top-size { visibility: hidden; pointer-events: none; }
  .home-top--special .home-top-panel > section, .home-top--special .home-top-size > section { flex: 1 0 auto; }
  .home-top--special .story-hero { display: flex; align-items: center; }
  .home-top--special .home-top-size .story-img { height: 380px; } /* the size copy has no picture: keep its height (modern.css max-height) */
}
@media (min-width: 992px) {
  .home-top--special .sd-banner { display: flex; flex-direction: column; }
  .home-top--special .sd-stage { flex: 1 0 auto; }
}
.home-top--special .home-top-nav { border-top: 3px solid rgba(255, 255, 255, .08); padding: 16px 0 20px; }
/* A dark turn (the event's hero, a kandil) would melt into the dark band: then the band gets the banners' red edge line. */
.home-top--special:has(.home-top-panel.is-current :is(.story-hero, .sd-variant-kandil)) .home-top-nav { border-top-color: #c8102e; }
.home-top--special .home-top-controls { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.home-top--special .home-top-controls h2, .home-top--special .home-top-phone-label {
  font: 600 12px/1.5 var(--default-font, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin: 0;
}
.home-top--special .home-top-phone-label { display: none; margin-bottom: 4px; }
.home-top--special .home-top-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
/* A small pill (28 px) whose tap area still reaches 44 px through the invisible ::after. */
.home-top--special .home-top-pause {
  position: relative; flex-shrink: 0; min-height: 28px; padding: 2px 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: transparent; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2;
}
.home-top--special .home-top-pause::after { content: ""; position: absolute; inset: -8px -4px; }
.home-top--special .home-top-pause:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.home-top--special .home-top-card {
  display: block; flex: 1 1 260px; max-width: 420px; min-width: 0; min-height: 64px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; background: rgba(255, 255, 255, .03); color: #fff !important; text-decoration: none; overflow-wrap: anywhere;
  transition: background-color .15s, border-color .15s;
}
.home-top--special .home-top-card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .35); }
.home-top--special .home-top-card.is-current { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }
.home-top--special .home-top-card { position: relative; padding-right: 40px; }
.home-top--special .home-top-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .8; } /* tappable, on phones too */
@media (min-width: 768px) { .home-top--special .home-top-card { flex: 1 1 0; max-width: none; } } /* the cards share the row up to Pause's edge */
.home-top--special .home-top-card strong { font-weight: 600; line-height: 1.3; }
.home-top--special .home-top-gloss { opacity: .75; }
.home-top--special .home-top-kind {
  display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
.home-top--special .home-top-nav a:focus-visible, .home-top--special .home-top-nav button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Phones: no turns and no Pause (home-top.js); "Also today" and the other days' cards, a tap puts that banner in place. */
@media (max-width: 767.98px) {
  .home-top--special .home-top-controls, .home-top--special .home-top-status { display: none; }
  .home-top--special .home-top-phone-label { display: block; }
  .home-top--special .home-top-card.is-current { display: none; }
  .home-top--special .home-top-card { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .home-top--special .home-top-card { transition: none; } }
/* The event's turn keeps its "Latest about <event>" news (as in the home pictures' rotation; home-top.css is not linked here). */
.home-top--special .home-latest { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 16px; min-width: 0; }
.home-top--special .home-latest-title { font: 600 12px/1.5 var(--default-font, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin: 0 0 4px; overflow-wrap: anywhere; }
.home-top--special .home-latest a { display: block; color: #fff; text-decoration: none; font-weight: 500; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.home-top--special .home-latest a:last-child, .home-top--special .home-latest-item:last-child, .home-top--special .home-latest-item a { border-bottom: 0; }
.home-top--special .home-latest a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.home-top--special .home-latest-item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.home-top--special .home-latest a.home-latest-photos { font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }