/* ==========================================================================
   LAYOUT MODULE ÔÇö "Homepage Wide" (CSS)
   Shared width container + fluid design tokens for all homepage components.

   USAGE:
   Every homepage section wraps its content in <div class="homepage-wide">.
   Components reference the --hp-* custom properties instead of hard-coding
   sizes, so mobile responsiveness comes from this one file.
   ========================================================================== */

:root{
  /* ---- container ---- */
  --hp-wide-max: 1400px;
  --hp-wide-gutter: 15px;

  /* ---- section spacing ---- */
  --hp-section-pad:       clamp(36px, 5vw, 56px);       /* top & bottom padding    */
  --hp-section-gap:       clamp(28px, 4vw, 44px);       /* gap between major blocks */

  /* ---- typography scale (fluid, no breakpoints needed) ---- */
  --hp-font-eyebrow:      clamp(12px, 1.2vw, 14px);
  --hp-font-title:        clamp(26px, 3.4vw, 40px);
  --hp-font-subtitle:     clamp(20px, 2.4vw, 28px);
  --hp-font-body:         clamp(14px, 1.4vw, 17px);
  --hp-font-small:        clamp(13px, 1.2vw, 15px);

  /* ---- line heights ---- */
  --hp-lh-title:          1.12;
  --hp-lh-body:           1.6;

  /* ---- grid ---- */
  --hp-grid-gap:          clamp(14px, 2vw, 22px);
  --hp-grid-min:          260px;                          /* auto-fill minmax floor  */

  /* ---- cards ---- */
  --hp-card-pad:          clamp(20px, 2.4vw, 32px);
  --hp-card-radius:       clamp(10px, 1.2vw, 14px);

  /* ---- number badges / icons ---- */
  --hp-badge-size:        clamp(48px, 5.6vw, 60px);
  --hp-badge-font:        clamp(20px, 2.4vw, 26px);

  /* ---- brand colours (single source of truth) ---- */
  --hp-magenta:           #e2007a;
  --hp-blue:              #007AB3;
  --hp-teal:              #41a6c2;
  --hp-ink:               #1a1a24;
  --hp-grey:              #5a6068;
  --hp-light-blue-bg:     #d2e9f6;
  --hp-light-blue-border: #b9ddf1;
  --hp-card-border:       #e6e8ef;
  --hp-panel-bg:          #e3f1fa;
  --hp-panel-border:      #c9e3f3;
}

/* ---- container ---- */
.homepage-wide{
  width:100%;
  max-width:var(--hp-wide-max);
  margin-left:auto; margin-right:auto;
  padding-left:var(--hp-wide-gutter);
  padding-right:var(--hp-wide-gutter);
}

@media (min-width:1600px){ :root{ --hp-wide-gutter:24px; } }

/* ---- shared utility classes (optional ÔÇö components can use directly) ---- */
.hp-eyebrow{
  margin:0 0 10px;
  color:var(--hp-magenta);
  font-size:var(--hp-font-eyebrow);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hp-title{
  margin:0 0 14px;
  color:var(--hp-ink);
  font-size:var(--hp-font-title);
  font-weight:700;
  line-height:var(--hp-lh-title);
}
.hp-lede{
  margin:0 0 var(--hp-section-gap);
  color:var(--hp-grey);
  font-size:var(--hp-font-body);
  line-height:var(--hp-lh-body);
}
.hp-card{
  background:#fff;
  border:1px solid var(--hp-card-border);
  border-radius:var(--hp-card-radius);
  padding:var(--hp-card-pad);
  box-shadow:0 14px 30px -18px rgba(26,26,36,.4);
}
.hp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--hp-grid-min), 1fr));
  gap:var(--hp-grid-gap);
}