/* =====================================================================
   Featured Partner placement -- market-page slot + homepage module
   Built: 2026-07-26 (pre-wave-1 task 8)

   Source of truth: ttn-vault/decisions/v2/featured-slot-design-spec.md.
   Every value below is MEASURED from the approved Claude Design bundle
   (Featured_Partner_Placement.html), not approximated. If this file and the
   bundle ever disagree, the bundle wins -- see the spec's discrepancy note.

   Loaded globally in base-v2.njk (same pattern as signup-v2.css). The
   component renders on market pages and the homepage only, and renders
   nothing at all while no course carries courses.is_featured, so a global
   load costs one small stylesheet and no layout on every other page.

   Approved frame is mobile (390px). No desktop state was designed: the card
   deliberately reuses .sct-course / .sct-tile, so it inherits the existing
   responsive card behavior at wider viewports. Desktop is a verify-in-preview
   check at 1280px, not a designed layout (decision 2026-07-26).

   CORRECTION 2026-07-27 (found in verification): "inherits the existing
   responsive card behavior" was only ever half true. .sct-course supplies CARD
   styling. Width and gutter come from the PARENT SECTION, and on the area page
   every section (.sct-pagehead, .sct-results, .sct-browse-section) declares its
   own. .sct-featured declared none, so the pinned card ran the full body width
   at every viewport while the organic cards sat inside the 1280px column. Any
   new area-page section must carry the container recipe itself; reusing a card
   class does not supply one.

   The featured treatment is EXACTLY: gold border + shadow-2 + one disclosure.
   Tiles are NOT restyled -- a featured course's tee times must look identical
   to an organic course's, so the placement never disguises itself as better
   inventory.

   ONE DISCLOSURE PER SURFACE (2026-07-27). Market page = badge chip on the
   card, no heading: the card sits in an organic results list, so the
   disclosure has to travel with it. Homepage = "Featured Partners" heading, no
   badge: the module is self-contained and every card in it is a paid partner.
   Running both on one surface is what this replaced -- the two labels sat ~40px
   apart saying the same thing.
   ===================================================================== */

/* =====================================================================
   MARKET-PAGE SLOT
   ===================================================================== */

/* Container recipe. Every sibling section on the area page (.sct-pagehead,
   .sct-results, .sct-browse-section) carries its own gutter plus a centered
   max-width column. This section originally carried neither, so it spanned the
   full body width at every viewport while the organic cards below sat inside
   the 1280px column (found in Task 8 verification, 2026-07-27). Horizontal
   values mirror .sct-results exactly so the pinned card and the organic cards
   share one left edge.

   Top padding matches .sct-results too (16px), because with the group heading
   removed the card now butts directly against .sct-pagehead, which has no
   bottom padding of its own.

   Bottom margin is 0 on purpose: .sct-results contributes its own 16px top
   padding, which reads as a slightly wider gap than the 12px between organic
   cards and quietly separates the paid placement from the results below. */
.sct-featured {
  display: block;
  padding: 16px 16px 0;
  margin: 0;
}

/* Gold border + elevation ARE the featured treatment. Organic cards carry
   var(--sct-rule-fine) and no shadow. */
.sct-course--featured {
  border: 1px solid var(--sct-overlay-featured-border);
  box-shadow: var(--sct-shadow-2);
  overflow: hidden;
}

/* Photo band: full-bleed to the card edges via negative margins that cancel
   the card's 16px padding. 150px on market pages.

   z-index: 0 is load-bearing, not decoration (fixed 2026-07-27). position:
   relative with z-index: auto does NOT create a stacking context, so the
   badge's z-index: 2 was escaping into the root and tying with .sct-search
   (position: relative, z-index: 2). Ties break by DOM order and this module
   comes after the header, so the badge painted over the open Area/Players
   dropdown. Raising the dropdown would not have helped: its z-index: 10 is
   already trapped inside .sct-search's context. Making the photo its own
   context keeps the badge contained at z=0 in the root, under the search card. */
.sct-featured__photo {
  position: relative;
  z-index: 0;
  display: block;
  height: 150px;
  margin: -16px -16px 14px;
  overflow: hidden;
  background: var(--sct-green-100);
}

.sct-featured__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge chip. MARKET-PAGE ONLY as of 2026-07-27 -- the homepage module
   discloses with its heading instead. Overlays the photo top-left; goes inline
   in the photo-free fallback. Wording is locked to "Featured Partner"
   (Finding B) -- do not soften to "Featured Course" or "Featured Club", both of
   which read as editorial curation and recreate the undisclosed-endorsement
   risk. This chip is now the ONLY disclosure on the market page, so it must not
   be removed without adding a heading back in its place. */
.sct-featured__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: var(--sct-z-raised);
  background: var(--sct-overlay-featured-chip-bg);
  border: 1px solid var(--sct-overlay-featured-chip);
  border-radius: var(--sct-radius-xs);
  padding: 5px 8px 4px;
  box-shadow: var(--sct-shadow-1);
  font-family: var(--sct-font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sct-gold-700);
  white-space: nowrap;
}

/* Photo-free fallback: same chip, static flow, above the course name. */
.sct-featured__badge--inline {
  position: static;
  display: inline-block;
  margin: 0 0 6px;
  box-shadow: none;
}

/* Zero-live-times state. The partner stays pinned on days with no inventory
   (contractual: "top of your market page" carries no inventory condition), so
   this replaces the tile strip while every piece of featured chrome stays put.
   Reads as information, never as an error -- an error-styled partner card is
   worse for the operator than no card at all. */
.sct-featured__empty {
  display: block;
  font-family: var(--sct-font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--sct-ink-600);
  background: var(--sct-green-50);
  border: var(--sct-rule-fine);
  border-radius: var(--sct-radius-sm);
  padding: 12px 14px;
}

/* Desktop, 768px+. Mirrors .sct-results: 32px gutter, centered 1280px column.
   Without this the pinned card ran edge to edge while every organic card sat
   inside the column.

   The photo band's negative margins have to cancel the CARD's padding, and
   .sct-course goes 16px -> 20px at this breakpoint, so a -16px band leaves a
   4px paper frame inside the rounded corners. Scoped to .sct-course--featured
   because the homepage card keeps 16px padding at every viewport. */
@media (min-width: 768px) {
  .sct-featured {
    padding: 16px 32px 0;
    max-width: var(--sct-content-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* Photo band at desktop. A fixed 150px is a ~8:1 letterbox once the card is
     1216px wide, which threw away most of the image.

     Explicit heights per breakpoint, NOT aspect-ratio. The first attempt used
     `aspect-ratio: 3/1; max-height: 300px` and the band rendered only ~900px
     wide inside a 1216px card: once max-height clamped the height, the ratio
     drove the WIDTH back down to height x 3 instead of letting the block fill
     its container. Fixed heights sidestep the interaction, and a block box with
     width: auto always fills the card. */
  .sct-course--featured .sct-featured__photo {
    height: 240px;
    margin: -20px -20px 16px;
  }
}

@media (min-width: 1280px) {
  /* Card is ~1216px here, so the band can take more height without the crop
     going back to a letterbox. */
  .sct-course--featured .sct-featured__photo {
    height: 300px;
  }
}

/* =====================================================================
   HOMEPAGE MODULE
   Sits above How It Works. All partners concurrent, no rotation, no cap.
   ===================================================================== */

.sct-featured-module {
  max-width: var(--sct-content-max);
  margin: 0 auto;
  padding: var(--sct-space-6) var(--sct-page-gutter) 0;
}

/* Matches .sct-hiw__eyebrow ("How it works") directly below it: Barlow italic
   500 / 22px / gold-700, sentence case. This heading is the ONLY disclosure on
   the homepage (the per-card badge was removed 2026-07-27), so it must not be
   removed without putting the badge back. */
.sct-featured-module__label {
  display: block;
  font-family: var(--sct-font-ui);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  color: var(--sct-gold-700);
  margin: 0 0 var(--sct-space-4);
}

.sct-featured-module__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sct-space-4);
}

.sct-featured-card {
  display: block;
  background: var(--sct-paper);
  border: 1px solid var(--sct-overlay-featured-border);
  border-radius: var(--sct-radius-md);
  padding: 16px;
  box-shadow: var(--sct-shadow-2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--sct-transition-normal),
              transform var(--sct-transition-fast);
}

.sct-featured-card:hover {
  box-shadow: var(--sct-shadow-3);
}

.sct-featured-card:focus-visible {
  outline: 2px solid var(--sct-gold-600);
  outline-offset: 2px;
}

/* 1-card launch state gets the taller 200px band; 3-card state stays at 150px.
   Both heights are locked in the design spec. */
.sct-featured-module--single .sct-featured__photo {
  height: 200px;
}

.sct-featured-card__body {
  display: block;
}

.sct-featured-card__name {
  display: block;
  font-family: var(--sct-font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--sct-ink-900);
}

.sct-featured-card__city {
  display: block;
  font-family: var(--sct-font-ui);
  font-size: 12px;
  line-height: 1.35;
  color: var(--sct-ink-500);
  margin-top: 2px;
}

.sct-featured-card__cta {
  display: inline-block;
  font-family: var(--sct-font-ui);
  font-weight: 500;
  font-size: 12px;
  color: var(--sct-green-800);
  margin-top: var(--sct-space-3);
}

.sct-featured-card:hover .sct-featured-card__cta {
  text-decoration: underline;
  text-decoration-color: var(--sct-gold-600);
  text-underline-offset: 3px;
}

/* Multi-partner: two-up from tablet, three-up at desktop. Inherited-responsive
   only -- no designed desktop state exists (see header). */
@media (min-width: 768px) {
  /* Match .sct-canvas-section (How It Works) exactly. 56px top clears the
     search card's -44px desktop overhang, which the old 24px did not, so the
     label was sitting almost under the card. The 64px gutter puts the module
     on the same left edge as the hero headline above and the steps below.
     Mobile is deliberately untouched: approved as-is at 390px on 2026-07-27. */
  .sct-featured-module {
    padding: 56px var(--sct-space-16) 0;
  }

  .sct-featured-module__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sct-featured-module:not(.sct-featured-module--single) .sct-featured-module__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Respect reduced-motion: the hover lift is decorative. */
@media (prefers-reduced-motion: reduce) {
  .sct-featured-card {
    transition: none;
  }
}