/* css/pages/home.css */

/* ------------------------------------------------------------
   1. WHAT WE DO  (three feature blocks on a pale-blue band)
   ------------------------------------------------------------ */
.products {
  position: relative;         /* anchors the ::before grid layer */
  padding: 80px 0;
  background-color: var(--blue-tint);
}
/* The grid lives on its own layer (not directly on .products) so it
   can fade in with a mask without fading the real content above it. */
.products::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image:
    linear-gradient(rgba(44, 54, 140, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 54, 140, 0.05) 1px, transparent 1px); */
  background-size: 38px 38px;
  /* Fades the grid in over the first 160px, echoing the color fade
     that already happens in the hero just above this section. */
  mask-image: linear-gradient(to bottom, transparent, black 160px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 160px);
}
/* .wrap sits above the ::before layer. Without this, the absolutely
   positioned pseudo-element would paint on top of the normal-flow
   content instead of behind it (same fix as .hero .wrap earlier). */
.products > .wrap {
  position: relative;
  z-index: 1;
}
/* The three offerings as a row of cards. Each card shows an image and
   a title; hovering the image blurs it and reveals a one-line
   description over the top. The whole card is a link. */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* White panel + hairline border, same "card" language as the rest of
   the site. The image bleeds edge-to-edge to the top of the card (no
   inner frame); the card's own rounded corners + overflow clip it.

   One variable — --flag-color, set by .live / .pending — drives the
   card's whole status system: the gradient bar along the top edge, the
   pulsing dot in the footer, and the hover border. Same convention the
   old feature blocks used. */
.product-card {
  position: relative;              /* anchors the ::before gradient bar */
  display: block;
  overflow: hidden;                /* clips image + bar to the rounded corners */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card.live    { --flag-color: var(--teal);  }  /* orderable now */
.product-card.pending { --flag-color: var(--amber); }  /* in development */

/* Status-gradient accent along the top edge — paints over the image. */
.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, var(--flag-color, var(--blue)), transparent 65%);
}

.product-card:hover,
.product-card:focus-visible {
  border-color: var(--flag-color, var(--blue));
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(20, 28, 66, 0.13);
}

/* Image window — fixed ratio, flush to the card edges. */
.product-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--blue-tint);
}
.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Blur is applied on hover; keep the transition on the base so it
     eases both in and out. */
  transition: filter 0.4s ease, transform 0.4s ease;
}

/* Description overlay — hidden until hover, then fades in over a
   dimmed, blurred image. A top-down gradient keeps the text legible
   without flattening the whole image to one muddy tone. */
.product-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg,
    rgba(20, 28, 66, 0.35) 0%,
    rgba(20, 28, 66, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-card:hover .product-card-media img,
.product-card:focus-visible .product-card-media img {
  filter: blur(4px);
  transform: scale(1.05);
}
.product-card:hover .product-card-overlay,
.product-card:focus-visible .product-card-overlay {
  opacity: 1;
}

/* Card footer — title row up top, status readout along the bottom,
   separated by a hairline. Reads like a labeled specimen: name first,
   state below. */
.product-card-body {
  padding: 16px 20px 14px;
}

.product-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(19px, 2.1vw, 23px);
  transition: color 0.15s ease;
}
.product-card-title::after {
  content: "\2192";                 /* → */
  font-size: 0.85em;
  color: var(--flag-color, var(--blue));
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.product-card:hover .product-card-title {
  color: var(--blue);
}
.product-card:hover .product-card-title::after,
.product-card:focus-visible .product-card-title::after {
  opacity: 1;
  transform: translateX(0);
}

/* Status flag — dot + mono label at the bottom of the card, divided
   from the title by a hairline. The dot picks up --flag-color, so it
   matches the card's top gradient bar. */
.product-card-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-card-flag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flag-color, var(--blue));
  animation: pulse-dot 2.6s ease-in-out infinite;
}
/* Slow opacity pulse for the status dot — a gentle "living indicator". */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card-flag::before { animation: none; }
}

/* The one-line description shown in the overlay. */
.feature-text {
  max-width: 34ch;
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .product-card-media img { transition: none; }
}


/* ------------------------------------------------------------
   2. RESPONSIVE (homepage sections only)
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  /* Cards drop to a single column. */
  .product-cards {
    grid-template-columns: 1fr;
  }
}