/* See ./product-tile.md for design notes, Figma token lock-in, and rationale. */

.product-tile__root {
  padding-block: var(--ll-space-6) var(--ll-space-9);
}

@media (width >= 1024px) {
  .product-tile__root {
    padding-block: var(--ll-space-9) var(--ll-space-15);
  }
}

/* --- Section heading ----------------------------------------------- */

.product-tile__heading {
  margin: 0 0 var(--ll-space-7);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-2xl-family);
  font-size: var(--ll-text-body-2xl-size);
  line-height: var(--ll-text-body-2xl-line-height);
  letter-spacing: var(--ll-text-body-2xl-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
  text-align: left;
}

@media (width >= 1024px) {
  .product-tile__heading {
    margin-block-end: var(--ll-space-8);
    font-family: var(--ll-text-body-3xl-family);
    font-size: var(--ll-text-body-3xl-size);
    line-height: var(--ll-text-body-3xl-line-height);
    letter-spacing: var(--ll-text-body-3xl-letter-spacing);
  }
}

/* --- List / slider viewport ---------------------------------------- */

.product-tile__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-tile__item {
  margin: 0;
  padding: 0;
}

/* --- Card (overlay l-tmlayout) ------------------------------------- */

.product-tile__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ll-radius-card);
  isolation: isolate;
  height: 444px;
}

.product-tile__card > .l-tmlayout__content {
  position: relative;
  height: 100%;
}

.product-tile__card.l-tmlayout[data-height-driver-sm='media']
  > .l-tmlayout__content
  > .l-tmlayout__media-section,
.product-tile__card.l-tmlayout[data-height-driver-md='media']
  > .l-tmlayout__content
  > .l-tmlayout__media-section,
.product-tile__card.l-tmlayout[data-height-driver-lg='media']
  > .l-tmlayout__content
  > .l-tmlayout__media-section,
.product-tile__card.l-tmlayout[data-height-driver-xl='media']
  > .l-tmlayout__content
  > .l-tmlayout__media-section {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.product-tile__card .l-tmlayout__media {
  width: 100%;
  height: 100%;
}

.product-tile__card .l-tmlayout__text-section {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.product-tile__card .l-tmlayout__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.product-tile__card--no-media {
  background: var(--ll-color-bg-secondary);
}

/* --- Text frame: spacer grows, details pinned to the card floor ---- */

.product-tile__card-text {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--ll-color-text-inverse);
}

.product-tile__card-spacer {
  flex: 1 1 auto;
  min-height: 0;
}

/* Glossy dark scrim under the details so white copy stays legible.
 * Figma 20979:17458: linear-gradient bottom-anchored, transparent ~38%
 * to opaque black ~81%. */
.product-tile__details {
  --pt-details-col: 246px; /* Figma plan-details column width (mobile/tablet) */

  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--ll-space-5);

  /* Full-bleed scrim across the card; the copy column inside is capped at
   * --pt-details-col and centered (align-items + max-width on __copy).
   * border-box so the 12px inline padding stays inside the 100% width
   * (otherwise the box overflows the card by 24px and shifts the scrim). */
  box-sizing: border-box;
  width: 100%;
  align-items: center;

  /* Figma plan-details is a ~246px column centered in the card with no
   * horizontal padding (12px gutter each side of a 270px tile). Keep the
   * inline padding small (space-4 = 12px) so the brand name fits on one
   * line - 24px gutters were squeezing "LifeLock Advanced" onto two lines
   * at the tablet tile width (frame 22690:18093). */
  padding: var(--ll-space-7) var(--ll-space-4) var(--ll-space-8);
  text-align: center;

  /* Figma scrim (tablet frame 22690:18074): linear-gradient(171deg,
   * transparent 38.5%, solid black 80.9%). The scrim reaches FULLY opaque
   * black - the previous 85% cap read as washed-out next to Figma. Anchored
   * to the card floor; we keep the start at the details box top (0%) and ramp
   * to solid black so copy over the busiest part of the photo stays legible. */
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 60%) 45%,
    rgb(0 0 0 / 100%) 100%
  );
}

.product-tile__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
  align-items: center;

  /* Figma plan-details is a fixed-width centered column, not edge-to-edge:
   * ~246px on mobile/tablet (frames 22690:16910 / 22690:18091) widening to
   * 304px on desktop (frame 20783:19561). Cap the copy column so the
   * description wraps like Figma instead of stretching across the wider
   * desktop tile. Width-agnostic: the column never exceeds the cap but still
   * shrinks inside the 12px-gutter details box on the narrowest tile. */
  max-width: var(--pt-details-col, 246px);
}

.product-tile__name {
  margin: 0;
  color: var(--ll-color-text-inverse);

  /* Figma title is H5/Medium (weight 500), but the global .h5 ramp paints
   * semibold (600). Repaint to medium so the title reads as thin as Figma
   * (tablet frame 22690:18074, PRIMARY/H5/Medium). */
  font-weight: var(--ds-font-weight-medium);

  /* Brand names are short, single-line labels in Figma (e.g. "LifeLock
   * Advanced"). Keep them on one line so they read as a title, not a
   * wrapped sentence. */
  white-space: nowrap;
}

.product-tile__description {
  margin: 0;
  color: var(--ll-color-text-inverse);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

/* --- Price (static + dynamic dp-element) --------------------------- */

.product-tile__price {
  margin: 0;
  color: var(--ll-color-text-inverse);
  font-family: var(--ll-text-body-3xl-family);
  font-size: var(--ll-text-body-3xl-size);
  line-height: var(--ll-text-body-3xl-line-height);
  letter-spacing: var(--ll-text-body-3xl-letter-spacing);

  /* Figma price big number is Body-3xl/Medium (500), not the body-3xl token
   * default (regular). The $ and /mo. affixes stay lighter - see below. */
  font-weight: var(--ds-font-weight-medium);
}

/* Pre-hydration #dp/price anchor (preserved by buildPrice) takes the big-number
 * price look so the initial paint matches the post-hydration dp-element
 * render. color:inherit keeps it the price color (never link-blue);
 * text-decoration is pinned to none explicitly (price is never underlined) so
 * the global :where(a:any-link) underline default can't leak in. Same contract
 * as comparison-chart / product-hero-plans. */
.product-tile__price a {
  color: inherit;
  text-decoration: none;
}

/* The dp-pipe emits the price as <span.dp-currency>$</span>
 * <span.dp-element>N.NN</span><span.dp-suffix>/ mo</span>; static authors
 * type <sub> for the affixes. Match both shapes so the currency + suffix
 * render smaller than the big number (Figma: $ + /mo are body-sm). */
.product-tile__price sub,
.product-tile__price .dp-currency,
.product-tile__price .dp-suffix {
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  vertical-align: baseline;
}

/* Figma's currency glyph ($) is a thin Lexend Light run (18px). We don't ship
 * Lexend, so approximate the thin look with the light weight on the existing
 * family - it reads markedly thinner than the medium number it sits beside. */
.product-tile__price sub:first-child,
.product-tile__price .dp-currency {
  font-weight: var(--ds-font-weight-light);
}

/* --- Learn more CTA (accent pill molecule) ------------------------- */

/* The global .button-wrapper paints a 12px block margin, which doubled the
 * price->CTA gap (16px details gap + 12px = 28px) and padded the space below
 * the CTA. Figma's plan-details uses a uniform 16px gap with no button margin
 * (frame 22690:18091). Zero it out at block scope - the details `gap` owns the
 * spacing. Scoped under .product-tile__details to beat the global single-class
 * rule on source order. */
.product-tile__details .product-tile__cta-wrapper {
  margin: 0;
}

/* The global .button.accent molecule paints a solid blue link-colour pill,
 * but the Figma product tile (THEME: LifeLock, frame 20536:54267) is a cream
 * pill with a 2px dark border and dark text: Color/Background/accent (#fef9ee
 * = --ll-color-bg-accent) fill, Color/Content/secondary (#161616 =
 * --ll-color-text-secondary) border + label. Repaint block-scoped so the
 * site-wide accent button is untouched.
 *
 * Size: Figma's button (node 20536:54267) is 129x48 - Button/Base/Regular
 * (Inter Tight 16 / 400 / line-height 24 / letter-spacing 0.32), 12px/24px
 * padding (space-4 / space-7), with the 2px stroke drawn INSIDE the frame.
 * Getting this pixel-exact needs three overrides on the global .button molecule:
 *   1. Weight - the molecule forces medium (500); Figma is regular (400). Medium
 *      glyphs are wider and overshoot the 129px hug.
 *   2. Line-height - the molecule hardcodes 1.25 (=20px); Figma is 24px.
 *   3. Border model - Figma's stroke sits inside the hug and does not grow it,
 *      but a real CSS border on a shrink-wrapped inline-flex button adds 2px per
 *      side to BOTH axes (box-sizing only affects explicitly-sized boxes). That
 *      4px is exactly why the pill measured ~133x52 instead of 129x48. Paint the
 *      ring with an inset box-shadow so it stays inside the box; height is then
 *      12+24+12 = 48 and width is 24+~81(label)+24 = ~129, matching Figma. */
.product-tile__card a.button.accent.product-tile__cta {
  --ll-button-padding: var(--ll-space-4) var(--ll-space-7);

  border: 0;
  background-color: var(--ll-color-bg-accent);
  box-shadow: inset 0 0 0 2px var(--ll-color-text-secondary);
  color: var(--ll-color-text-secondary);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
}

.product-tile__card a.button.accent.product-tile__cta:hover,
.product-tile__card a.button.accent.product-tile__cta:focus-visible {
  background-color: var(--ll-color-bg-accent-warm);
  box-shadow: inset 0 0 0 2px var(--ll-color-text-secondary);
  color: var(--ll-color-text-secondary);
}

/* --- Arrow buttons ------------------------------------------------- */

.product-tile__rail .l-slider__arrow {
  border-color: var(--ll-color-text-secondary);
  color: var(--ll-color-text-secondary);
  box-shadow: none;
}

.product-tile__rail .l-slider__arrow:hover {
  background: var(--ll-color-bg-secondary);
}

.product-tile__rail .l-slider__arrow:disabled,
.product-tile__rail .l-slider__arrow[aria-disabled='true'] {
  border-color: var(--ll-color-text-disabled);
  color: var(--ll-color-text-disabled);
  box-shadow: none;
}

.product-tile__rail .l-slider__arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

.product-tile__rail .l-slider__arrow svg path {
  fill: currentcolor;
  stroke: none;
}

/* Figma arrow group gap is space-5 (16px); the primitive default is space-2. */
.product-tile__rail .l-slider__arrows {
  gap: var(--ll-space-5);
}

/* Smooth slide on arrow / dot navigation. The l-slider runtime advances by
 * assigning `viewport.scrollLeft` (instant by design in the shared primitive);
 * scroll-behavior: smooth on the scroll container makes those programmatic
 * scrolls animate without touching the primitive JS. Native touch/drag scroll
 * is direct manipulation and unaffected. Block-scoped so other sliders keep
 * the primitive's instant default. */
.product-tile__rail .l-slider__viewport {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .product-tile__rail .l-slider__viewport {
    scroll-behavior: auto;
  }
}

/* --- Mobile / tablet rail ------------------------------------------ */

.product-tile__rail {
  --l-slider-peek-end-sm: 0px;
  --l-slider-peek-end-md: 0px;
  --l-slider-peek-end-lg: 0px;
  --l-slider-pad-inline-sm: 0px;
  --l-slider-pad-inline-md: 0px;
  --l-slider-overflow-block-sm: 0px;
}

@media (width < 1024px) {
  .product-tile__rail.l-slider {
    gap: var(--ll-space-7);
  }
}

@media (width < 768px) {
  .product-tile__rail.l-slider {
    --l-slider-slide-basis: 77.333%;
  }
}

@media (width < 1024px) {
  .product-tile__rail .l-slider__viewport {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 0;
    scroll-padding-inline: var(--ll-grid-margin);
  }

  .product-tile__rail .l-slider__viewport::before {
    content: '';
    flex: 0 0 var(--ll-grid-margin);
    margin-inline-end: calc(-1 * var(--l-slider-gap));
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .product-tile__rail .l-slider__slide:first-child {
    scroll-snap-align: none;
  }

  .product-tile__rail .l-slider__slide:last-child {
    scroll-snap-align: end;
  }

  .product-tile__rail .l-slider__viewport::after {
    content: '';
    flex: 0 0 var(--ll-grid-margin);
    margin-inline-start: calc(-1 * var(--l-slider-gap));
  }

  @supports (width: 100dvw) {
    .product-tile__rail .l-slider__viewport {
      width: 100dvw;
      max-width: 100dvw;
      margin-inline: calc(50% - 50dvw);
    }
  }
}

@media (width < 768px) {
  .product-tile__rail .l-slider__slide {
    scroll-snap-align: center;
  }

  .product-tile__rail .l-slider__slide:first-child {
    scroll-snap-align: none;
  }

  .product-tile__rail .l-slider__slide:last-child {
    scroll-snap-align: end;
  }
}

@media (width >= 768px) and (width < 1024px) {
  .product-tile__rail .l-slider__viewport {
    scroll-padding-inline: 0 var(--ll-grid-margin);
  }

  .product-tile__rail .l-slider__slide {
    scroll-snap-align: none;
  }

  .product-tile__rail .l-slider__slide:last-child {
    scroll-snap-align: end;
  }
}

@media (width >= 1024px) {
  .product-tile__rail .l-slider__controls {
    display: none;
  }

  .product-tile__card {
    height: 486px;
  }

  .product-tile__details {
    --pt-details-col: 257px;

    padding-block-end: var(--ll-space-7);
  }
}

@media (width >= 1440px) {
  .product-tile__details {
    --pt-details-col: 304px;

    padding-block-end: var(--ll-space-8);
  }
}