/* ==========================================================================
   08-TEMPLATES.CSS  —  the template previews
   --------------------------------------------------------------------------
   Each template is shown as a phone standing on the page, with its name,
   price and buttons underneath. There is no card around it: no border, no
   white panel, no padding. The phone sits directly on the section's cream
   background, lifted by a soft shadow.

   THE SHADOW IS A drop-shadow FILTER, NOT A box-shadow. That matters. The
   picture file is a rectangle with a phone-shaped hole punched through the
   transparent parts, so box-shadow would draw a hard rectangle floating
   behind a rounded phone. A drop-shadow filter follows the transparency, so
   the shadow takes the phone's real outline.

   Everything is built by js/templates.js from the `templates` list in
   js/data/site-config.js.
   ========================================================================== */

.templates__heading {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--ink);
  text-align: center;
}

/* One column on a phone, two from 860px up (see 99-responsive.css).
   auto-fit means the number of columns follows the number of templates —
   add a third to the config and the row becomes three across on a wide
   screen, with no CSS to change. */
.templates__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;

  max-width: var(--templates-max);
  margin-top: var(--space-6);
  margin-inline: auto;
}


/* ==========================================================================
   ONE TEMPLATE
   ========================================================================== */
.template {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ==========================================================================
   THE PHONE
   ========================================================================== */
.template .card__phone {
  width: 100%;
  max-width: var(--phone-w);
  margin-inline: auto;
}

.card__phone-link {
  display: block;
  cursor: pointer;
}

.card__phone-img {
  display: block;
  width: 100%;
  height: auto;

  /* Two shadows, not one: a tight close shadow and a wide soft one. Together
     they read as a real object lifted off the page. A single shadow reads as
     a sticker stuck onto it. */
  filter:
    drop-shadow(0 8px 16px rgba(20, 17, 15, 0.10))
    drop-shadow(0 24px 48px rgba(20, 17, 15, 0.14));

  transition:
    transform var(--dur-base) var(--ease-out),
    filter    var(--dur-base) var(--ease-out);
}

/* Only on devices with a real pointer. On a phone a "hover" is a tap, and a
   picture that shifts under your finger feels broken rather than alive. */
@media (hover: hover) {

  .template:hover .card__phone-img {
    transform: translateY(-6px);
    filter:
      drop-shadow(0 10px 20px rgba(20, 17, 15, 0.12))
      drop-shadow(0 32px 60px rgba(20, 17, 15, 0.18));
  }
}


/* ==========================================================================
   MISSING-PICTURE PLACEHOLDER
   Shaped like the phone it stands in for, so a card that falls back to it
   does not change the height of the row next to it.
   ========================================================================== */
.card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  width: 100%;
  aspect-ratio: var(--phone-ratio);
  padding: var(--space-4);
  text-align: center;

  background-color: var(--cream-deep);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
}

.card__placeholder-star {
  width: var(--star-size-lg);
  height: var(--star-size-lg);
  fill: var(--orange);
}

.card__placeholder-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ink-muted);
}


/* ==========================================================================
   THE WORDS AND BUTTONS BELOW
   Unchanged from before, other than losing the panel they used to sit in.
   Capped at the phone's width and left-aligned beneath it.
   ========================================================================== */
.card__body {
  width: 100%;
  max-width: var(--phone-w);
  margin-top: var(--space-4);
  margin-inline: auto;
}

/* The name and the price share one row.

   Aligned on the baseline rather than centred: the two are set at quite
   different sizes, and centring would leave the price floating oddly against
   the name. Baseline puts them on the same invisible line, the way they
   would sit if you had written them out by hand.

   It is allowed to wrap. On a narrow phone a long template name takes the
   whole width and the price drops underneath it, still left-aligned — never
   overlapping the name and never truncating it. */
.card__headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-card-title);
  line-height: 1.2;
  color: var(--ink);
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: none;
}

.card__price-was {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-price-was);
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.card__price-now {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-price);
  line-height: 1.2;
  color: var(--ink);
}

/* The offer line, directly under the name */
.card__offer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);

  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-offer);
  letter-spacing: var(--ls-offer);
  text-transform: uppercase;
  color: var(--orange-deep);
}

.card__offer svg {
  width: var(--star-size-sm);
  height: var(--star-size-sm);
  flex: none;
  fill: var(--orange);
}

.card__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* The two buttons split the width evenly and stay side by side at every
   screen size, right down to 360px. */
.card__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--btn-h-card);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  white-space: nowrap;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .card__phone-img {
    transition: none;
  }
}