/* =========================================================
   ABOUT PAGE HELPERS (no token changes; copy strictly preserved)
   – Header consistency guard
   – Responsive grids & icon cards as requested
========================================================= */

/* ---------- NAV CONSISTENCY FIX ----------
   Ensures header container width/padding matches Home exactly,
   preventing any pixel shift between pages. */
.hc-header .hc-container{
  width:100%;
  max-width:100vw;
  margin:0;
  padding-left:clamp(8px,2vw,20px);
  padding-right:clamp(8px,2vw,20px);
}

/* ---------- Hero image (visual only; text unchanged) ---------- */
.about-hero{
  background-image: url('https://halconcaravans.com/assets/img/hero/about-bg.png');
}

:root{
  --hero-ratio: 2841 / 1441;
}


/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.story-grid{grid-template-columns:1fr}}
.story-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px}
.founder-quote{margin:22px 0 0;text-align:center}
.founder-quote blockquote{font-family:'Merriweather',serif;font-size:clamp(18px,1.6vw,24px);color:var(--ink);margin:0}
.founder-quote figcaption{color:#475569;margin-top:6px}

/* ---------- Mission / Vision ---------- */
.mv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.mv-grid{grid-template-columns:1fr}}
.mv-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px}

/* ---------- What sets us apart ----------
   • Desktop: 1×4  • ≤1024px: 2×2
   • Slightly reduced rectangle height
   • Equal card heights + centered alignment */
.apart-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.apart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.apart-grid > .about-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:340px;height:100%}
.apart-grid .about-rect{
  width:min(92%,480px);
  height:clamp(100px,18vw,128px); /* reduced height */
  border-radius:16px;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 20px rgba(2,6,23,.08);
  margin-bottom:10px;
}
.apart-grid .about-svg{width:min(42%,110px);height:auto}

/* ---------- Pillars base (from your file) ---------- */
.pillars-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.pillars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pillar{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px}

/* ---------- How we build (icon on top, centered; content unchanged) ---------- */
.hb-grid > .hb-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-height:200px;height:100%;
}
.hb-ico{
  width:64px;height:64px;border-radius:16px;
  display:grid;place-items:center;
  color:#1d4ed8;
}
.hb-ico svg{width:30px;height:30px}
.hb-card h3{margin:4px 0 6px}
.hb-card p{margin:0;color:#475569}

/* ---------- Who we’re for (icon cards; content unchanged) ---------- */
.who-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aud-rich{
  text-align:center;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:flex-start;min-height:220px;height:100%;
}
.aud-ico{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:#f1f5ff;border:1px solid #dbe3ff;color:#1d4ed8;
}
.aud-ico svg{width:30px;height:30px}
.aud-rich h3{margin:4px 0 4px}
.aud-rich p{margin:0;color:#475569}
.flex-container-build-card {
  flex-row;
  
}

/* --- Why Halcon: line-icon sizing + thin stroke --- */
.about-rect{
  background:#f5f7ff;                 /* soft, neutral tint */
  border:1px solid #dbe2ff;            /* subtle border like Offer badges */
  box-shadow:var(--shadow-sm, 0 2px 6px rgba(2,6,23,.06));
}

.about-svg{
  width:clamp(20px, 10%, 40px);        /* smaller than before */
  height:auto;
  stroke-width:0.8;                    /* thinner line */
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  display:block;
  margin-inline:auto;
}

/* What sets us apart → smaller line icons */
.apart-grid .about-svg{
  width: clamp(28px, 22%, 48px);  /* ↓ size */
  height: auto;
  stroke:#000;
  stroke-width: 1.1;              /* thin lines */
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* What sets us apart → 1 column on small screens only for this section */
@media (max-width:640px){
  .apart-grid{ grid-template-columns: 1fr; }
}

/* === What sets us apart: tighten spacing + align icon+heading (section only) === */

/* 1) Make cards shorter and left-aligned (override earlier center & tall min-height) */
.apart-grid > .about-card{
  align-items: flex-start;     /* was center */
  text-align: left;            /* was center */
  min-height: auto;            /* was 340px, causing big empty space */
  padding: 16px 18px;          /* a touch tighter */
}

/* 2) Compact head row: icon + heading perfectly aligned */
.apart-grid .card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 6px;          /* smaller gap above paragraph */
}
.apart-grid .head-ico{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
}
.apart-grid .about-svg{
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}

/* 3) Smaller, lighter section-only heading */
.apart-grid h3{
  font-size: clamp(16px, 1.0vw + 12px, 20px); /* smaller than global h3 */
  font-weight: 600;                            /* lighter than the site default */
  line-height: 1.25;
  margin: 0;                                   /* kill extra top/bottom space */
}

/* 4) Paragraph: trim bottom margin (prevents big white band) */
.apart-grid .about-card p{ margin-bottom: 0; }

/* 5) Keep your requested grid: 1×4 (lg), 2×2 (md), 1×1 (sm) – already set earlier.
      Add an explicit small breakpoint here for safety (no side effects). */
@media (max-width: 640px){
  .apart-grid{ grid-template-columns: 1fr; }
}

/* ==== Who we’re for: photo backgrounds (section-only) ==== */
.who-grid .aud-card.aud-bg{
  position: relative;
  overflow: hidden;
  color: var(--ink, #0b1b2b);
  border-radius: 16px;
  isolation: isolate;             /* keeps overlay behind text */
  min-height: 280px;              /* comfortable card height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Background image layer */
.who-grid .aud-card.aud-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);         /* tiny zoom to avoid edge gaps on resize */
  z-index: -2;
}

/* Readability overlay */
.who-grid .aud-card.aud-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  /* top-left darker for icon+heading, fades to transparent toward bottom-right */
  background: linear-gradient(160deg, rgba(0,20,40,.55) 0%, rgba(0,20,40,.35) 40%, rgba(0,0,0,0) 85%);
  z-index: -1;
}

/* Tweak icon + heading colors on photos */
.who-grid .aud-card.aud-bg .aud-ico svg{ stroke: #fff; }
.who-grid .aud-card.aud-bg h3{ color: #fff; font-size: 25px; font-weight: 600;}
.who-grid .aud-card.aud-bg p { color: #fff; font-size: 18px; font-weight: 800;}

/* Compact head row (reuses earlier tightening) */
.who-grid .aud-card.aud-bg .card-head,
.who-grid .aud-card.aud-bg .aud-ico{ /* if your markup uses .card-head */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Backgrounds per card */
.who-grid .aud-card.aud-urban::before{
  /* Use your provided city image */
  background-image: url("https://halconcaravans.com/assets/img/aboutpage/urban-explorers.jpg");
  /* If you later export multiple sizes, switch to image-set(): 
   background-image: image-set(
     url('urban-1280.jpg') 1x,
     url('urban-2560.jpg') 2x
   );
  */
}

.who-grid .aud-card.aud-gift::before{
  /* Replace with your chosen “keys gifting” or “itinerary reveal” image */
  background-image: url("https://halconcaravans.com/assets/img/aboutpage/parents-gift.png");
  background-position: 40% center;  /* favor hands/keys area */
}

.who-grid .aud-card.aud-family::before{
  background-image: url("https://halconcaravans.com/assets/img/aboutpage/family.png");

}

.who-grid .aud-card.aud-creators::before{
  background-image: url("https://halconcaravans.com/assets/img/aboutpage/creator-highway.png");
 /* bias to tripod/laptop */
}

/* Layout you wanted remains: 1x4 lg, 2x2 md, 1x sm (already set elsewhere).
   Add a small safety min-height change on very small devices: */
@media (max-width:640px){
  .who-grid .aud-card.aud-bg{ min-height: 240px; }
}


/* Add vertical spacing between Who we're for cards */
.who-grid .aud-card {
  margin-bottom: 10px; /* matches your other section gaps */
}

/* --- Improve readability of overlay text in "Who we’re for" section --- */
.who-grid .aud-card.aud-bg h3,
.who-grid .aud-card.aud-bg p {
  text-shadow: 0 1px 8px rgb(0, 0, 0), 
               0 0 20px rgb(0, 0, 0); /* layered shadow for depth */
}