/* ==========================================================================
   Brastos Sodas — homepage · variant C "Editorial market" (03-page-homepage.md)
   --------------------------------------------------------------------------
   Only the blocks that exist on this page and nowhere else: the hero photograph,
   the chrome band that overlaps its foot, and the two states of the day control
   inside it (inline strip ≥ 600, collapsed summary ≤ 599 — ADR-005 surface 2).
   Everything shared (header, cards, sections, footer) is base.css.

   Corrections against the board (03 §5, §7):
     · hero top padding --sp-3 at ≤ 599 (was --sp-5): 12 px is enough between
       chrome and a photo on the page, and it is part of the first-add budget;
     · portrait crop is 4:3 at ≤ 599 (the board's 3:2 cuts the subject's face —
       CREDITS.md); 4:3 is the floor;
     · the inline strip collapses at ≤ 599 only when JS runs; without JS the
       strip stays, because it is the real GET form;
     · v4 (PLAN-B3 §0): the card is Orderday's server-rendered `full` mount — its
       rows (modes · days · time windows · summary · note, and the no-JS date +
       window + `Patvirtinti` row) are laid out by orderday-skin.css; this file
       keeps only the card chrome;
     · the rule sentence lives in the sheet's intro, not under the strip (QA 2026-09-15 design 9).
   ========================================================================== */

.c-hero { padding-top: var(--sp-5); }
.c-hero__pic { border-radius: var(--rad-l); overflow: hidden; background: var(--photo-ground); aspect-ratio: 5 / 2; }
.c-hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.c-band { position: relative; z-index: var(--z-raised); margin-top: calc(-1 * var(--sp-9)); width: min(var(--wrap) - 2 * var(--sp-8), 100% - 2 * var(--gutter)); margin-inline: auto;
  background: var(--chrome); border-radius: var(--rad-l); padding: var(--sp-7) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); }
.c-band .lead { max-width: 44ch; color: var(--ink-soft); }
/* the band is two columns ≥ 900: the promise on the left, the "when" card on the right (client, 2026-09-15) */
@media (min-width: 900px) { .c-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--sp-8); align-items: start; } }
.c-band__intro { display: flex; flex-direction: column; gap: var(--sp-4); }
.c-band__cta { align-self: flex-start; margin-top: var(--sp-2); }
.c-band .c-band__when { display: grid; gap: var(--sp-4); background: var(--page); border-radius: var(--rad-m); padding: var(--sp-5); }   /* the rows (modes 2-up, days 4 + 4, windows 3-across) are orderday-skin.css's */
.c-band__when h2 { font-family: var(--ff-body); font-size: var(--fz-body); font-weight: 600; line-height: var(--lh-tight); }

.c-hero + .sec { padding-top: var(--sec-y); }

.c-band__compact { display: none; }   /* ≥ 600 the card is the control */

@media (max-width: 799px) {
  .c-band { padding: var(--sp-5); margin-top: calc(-1 * var(--sp-6) - var(--sp-2)); width: min(var(--wrap), 100% - 2 * var(--gutter)); border-radius: var(--rad-m); }
}
@media (max-width: 599px) {
  .c-hero { padding-top: var(--sp-3); }
  .c-hero__pic { aspect-ratio: 4 / 3; border-radius: var(--rad-m); }
  .c-hero__pic img { object-position: 50% 30%; }
  .c-band { margin-top: calc(-1 * var(--sp-5)); padding: var(--sp-4); gap: var(--sp-3); }
  .c-band .lead { display: none; }
  /* the band's H1 is the first shelf's heading (03 §2), so band → grid is the head → grid step, not a section step (03 §5 budget) */
  .c-hero + .sec { padding-top: var(--sec-y-half); }
  /* ADR-005 surface 2: one summary line + a link that opens the bottom sheet. JS only — the form is the no-JS path. */
  html:not(.no-js) .c-band .c-band__when { display: none; }
  html:not(.no-js) .c-band__compact { display: block; }   /* Orderday's compact line, styled in orderday-skin.css */
}