/* landing.css — ZGF Design Technology App Launcher
   Precision Grid aesthetic: architectural, minimal, brand-faithful
   ─────────────────────────────────────────────────────────────── */

/* ── Scoped tokens ──────────────────────────────────────────────── */
.landing-main {
  --accent:       var(--zgfred, #E33B45);
  --grid-line:    var(--page-border, rgba(0, 0, 0, 0.09));
  --card-bg:      var(--page-bg, #ffffff);
  --text-primary: var(--page-text, #1a1a1a);
  --text-muted:   var(--zgfgray, #75777b);
  --text-subtle:  var(--zgflightgray, #a7a9ac);
}

[data-theme="dark"] .landing-main {
  --grid-line: rgba(255, 255, 255, 0.07);
}

/* ── Page shell ─────────────────────────────────────────────────── */
.landing-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.landing-hero {
  margin-bottom: 36px;
  padding-left: 2px;
}

/* Red rule draws in on load — CSS-only, fires immediately, no JS */
.landing-hero::before {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: var(--accent);
  margin-bottom: 18px;
  animation: rule-draw 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.08s forwards;
}

@keyframes rule-draw {
  to { width: 28px; }
}

.landing-title {
  font-family: 'Futura PT', 'futura-pt', 'Trebuchet MS', sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.2;
}

.landing-tagline {
  font-family: 'Proxima Nova', 'proxima-nova', sans-serif;
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin: 0;
}

/* ── Precision Grid ─────────────────────────────────────────────── */
/*
   The grid container background IS the 1px line between cells.
   Each card sits on top with its own background, so the gap
   reveals the container color. No individual card borders needed.
   Fixed column count = stable layout from first paint = no click lag.
*/
.landing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}

/* ── Card ───────────────────────────────────────────────────────── */
.landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /*
    No border-radius — sharp tiles flush in the grid.
    No box-shadow — grid lines provide visual separation.
    No translateY — no layout recalculation on hover.
  */
}

/*
  Hover effect 1: Left accent bar
  scaleY on a ::before pseudo-element.
  Pure GPU-composited transform — zero path-geometry calculation,
  runs at 60fps, immediately interactive on page load.
*/
.landing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 190ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  will-change: transform;
}

/*
  Hover effect 2: Background tint overlay
  ::after at low opacity — no layout changes, composited separately.
*/
.landing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 190ms ease;
  pointer-events: none;
  z-index: 1;
}

.landing-card:hover::before,
.landing-card:focus-visible::before {
  transform: scaleY(1);
}

.landing-card:hover::after,
.landing-card:focus-visible::after {
  opacity: 0.04;
}

[data-theme="dark"] .landing-card:hover::after,
[data-theme="dark"] .landing-card:focus-visible::after {
  opacity: 0.09;
}

/* ── Card image ──────────────────────────────────────────────────── */
.card-image-wrap {
  height: 55%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--grid-line);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /*
    Hover effect 3: Image zooms in-place inside overflow:hidden.
    The card itself never moves. Visually rich, layout-stable.
  */
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.landing-card:hover .card-image,
.landing-card:focus-visible .card-image {
  transform: scale(1.05);
}

/* ── Card body ───────────────────────────────────────────────────── */
.card-body {
  flex: 1;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.card-category {
  font-family: 'Futura PT', 'futura-pt', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0;
}

.card-title {
  font-family: 'Futura PT', 'futura-pt', 'Trebuchet MS', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  /*
    Hover effect 4: Title color shifts to brand red.
    Single-property transition, imperceptible cost.
  */
  transition: color 190ms ease;
}

.landing-card:hover .card-title,
.landing-card:focus-visible .card-title {
  color: var(--accent);
}

.card-tagline {
  font-family: 'Proxima Nova', 'proxima-nova', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc {
  font-family: 'Proxima Nova', 'proxima-nova', sans-serif;
  font-size: 0.76rem;
  color: var(--text-subtle);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Theme-aware card images ─────────────────────────────────────── */
/* Light mode (default): show light variant, hide dark variant */
.card-img-dark { display: none; }

/* Dark mode: swap */
[data-theme="dark"] .card-img-dark  { display: block; }
[data-theme="dark"] .card-img-light { display: none; }

/* ── Keyboard focus ──────────────────────────────────────────────── */
.landing-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .landing-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .landing-main { padding: 28px 20px 60px; }
  .landing-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
  .landing-cards { grid-template-columns: 1fr; }
}