/* HomePage 2 round 10: the promotions band (Rule 10, owner decision 2026-09-22). Homepage only.
   The cards are rendered by scripts/promotions.mjs from the approved App snapshot, so this file
   only styles them; with no active promotion the band is not rendered at all. Each card names its
   office, because the offers run per office. One surface, one edge: a white card on the porcelain band, no border and no shadow. */
.home2-specials { padding-block: var(--h2-section-y); background: var(--h2-porcelain); }
.home2-specials__heading { max-width: 26em; margin-bottom: var(--h2-head-gap); }
.home2-specials__heading h2 { margin: 6px 0 0; font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2-specials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--h2-gap); }
.home2 .home2-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  border: 0;
  border-radius: var(--h2-radius-tile);
  background: #ffffff;
  box-shadow: none;
}
.home2 .home2-promo__office { margin: 0; color: var(--h2-brass-text); font: 600 var(--h2-fs-small)/1.3 var(--h2-font-text); letter-spacing: var(--h2-ls-label); text-transform: uppercase; }
.home2 .home2-promo h3 { margin: 0; font-size: var(--h2-fs-tile); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-tile); text-wrap: balance; }
.home2 .home2-promo__text { max-width: 34em; margin: 0; color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); text-wrap: pretty; }
/* Two actions per offer (owner decision, Jacob 2026-09-22): read the offer, or ask for a time.
   They sit at the foot of the card and wrap onto two lines when the card is narrow. */
.home2 .home2-promo__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 6px; }

/* With a picture the card turns into a dark tile: the image is a band across the top (decorative,
   empty alt) and the offer text sits below it on the night surface, so the type never competes with
   the photograph and keeps the night band's measured contrasts. */
.home2 .home2-promo--photo { padding: 0 0 clamp(24px, 3vw, 32px); overflow: hidden; background: var(--h2-night); color: var(--h2-night-text); }
.home2 .home2-promo--photo > :not(.home2-promo__bg) { margin-inline: clamp(24px, 3vw, 32px); }
.home2 .home2-promo__bg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.home2 .home2-promo--photo .home2-promo__office { margin-top: clamp(20px, 2.5vw, 28px); color: var(--h2-brass-night); }
.home2 .home2-promo--photo .home2-promo__text { color: var(--h2-night-text-2); }
.home2 .home2-promo--photo .button { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-promo--photo .button:is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
/* The second action is the quieter one: the night surface with a hairline ring, white type on it. */
.home2 .home2-promo--photo .button--outline { background: transparent; color: var(--h2-night-text); box-shadow: inset 0 0 0 1px rgb(245 243 239 / .42); }
.home2 .home2-promo--photo .button--outline:is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-promo--photo :focus-visible { outline: 2px solid var(--h2-focus-dark); outline-offset: 3px; }