/* ══════════════ Guides page ══════════════
   Two-column layout: intro copy on the left, three staggered coloured
   cards on the right. Cards lift on hover with a smooth "Read now"
   reveal — all CSS, no JS.

   Reuses site design system: BrittiSans display via
   var(--font-family--font-primary), Inter body via
   var(--_font-family-2---font-family-2), same eyebrow / heading
   rhythm as the product page. Card background colours match the
   design mock (deep green / mid blue / near-black). */

.gd-hero {
  position: relative;
  background: var(--colors--white, #ffffff);
  padding: 92px 0 132px;
}

.gd-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.gd-intro { min-width: 0; }

.gd-eyebrow {
  font-family: var(--font-family--font-primary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #16A88B;
  margin: 0 0 20px;
}

.gd-title {
  font-family: var(--font-family--font-primary);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--colors--text-color, #080511);
  max-width: 15ch;
  margin: 0 0 24px;
  text-wrap: balance;
}

.gd-sub {
  font-family: var(--_font-family-2---font-family-2, Inter, sans-serif);
  font-size: 18px;
  line-height: 1.6;
  color: #5B6670;
  max-width: 46ch;
  margin: 0;
}

/* ── Staggered card grid ─────────────────────────────────────────── */

.gd-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  min-width: 0;
}

.gd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: 26px 24px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 20px 44px -26px rgba(16, 40, 33, 0.4);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1), box-shadow 0.3s ease;
  cursor: pointer;
}

.gd-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -28px rgba(16, 40, 33, 0.5);
}

.gd-card-art {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 180px;
  height: 180px;
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
}
.gd-card-art svg { width: 100%; height: 100%; display: block; }

.gd-card-eyb {
  font-family: var(--_font-family-2---font-family-2, Inter, sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 14px;
  position: relative;
  z-index: 2;
}

.gd-card-title {
  font-family: var(--font-family--font-primary);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.gd-card-read {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-family--font-primary);
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gd-card-read svg { width: 15px; height: 15px; flex-shrink: 0; }

.gd-card:hover .gd-card-read {
  opacity: 1;
  transform: none;
}

/* Colour variants — mirror the design mock. */
.gd-card--user     { background: #2C7E5E; }
.gd-card--journey  { background: #3F7EA8; }
.gd-card--platform { background: #16201D; }

/* Staggered placement:
     - user     : left column, offset 40px down
     - journey  : right column, spans both rows (taller)
     - platform : left column, bottom row */
.gd-card--user     { grid-column: 1; grid-row: 1;         margin-top: 40px; min-height: 210px; }
.gd-card--journey  { grid-column: 2; grid-row: 1 / span 2;                   min-height: 340px; }
.gd-card--platform { grid-column: 1; grid-row: 2;                            min-height: 210px; }

@media (max-width: 900px) {
  .gd-hero { padding: 64px 0 96px; }
  .gd-inner { grid-template-columns: 1fr; gap: 40px; }
  .gd-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .gd-card--user { margin-top: 0; }
}

/* ═════════ iPad-portrait / small-tablet breakpoint (768px) ═════════
   The 900px rule collapses .gd-inner to 1-col and removes the desktop
   stagger's top offset, but .gd-card--journey still has the desktop
   `grid-row: 1 / span 2` — so at 768 the journey card is visually tall
   on the right, columns are uneven, and the stagger reads as a bug.
   This block resets all cards to auto-flow. Layout at 768: row 1 has
   user | journey (equal height); row 2 has platform full-width. The
   existing 560 rule (below) then collapses to 1-col; source order
   places 768 BEFORE 560, so 560's grid-column: 1 wins at ≤560. */
@media (max-width: 768px) {
  .gd-hero { padding: 56px 0 80px; }
  .gd-inner { gap: 32px; }
  .gd-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .gd-card--user     { grid-column: 1;         grid-row: auto; margin-top: 0; min-height: 200px; }
  .gd-card--journey  { grid-column: 2;         grid-row: auto;                 min-height: 200px; }
  .gd-card--platform { grid-column: 1 / span 2; grid-row: auto;                 min-height: 200px; }
}

@media (max-width: 560px) {
  .gd-cards { grid-template-columns: 1fr; }
  .gd-card--user,
  .gd-card--journey,
  .gd-card--platform { grid-column: 1; grid-row: auto; min-height: 210px; }
}