/**
 * VGTME — homepage v3 components (front-v3.tpl.php only).
 *
 * Ported from the approved build's homepage-only inline <style> block
 * (ProjectHTML/index.html). It is a SEPARATE file, not an addition to
 * vgtme.css and not an addition to vgt-sections.css, for two reasons:
 *
 *   - vgtme.css is not merged with the approved build (migration doc §7/§9).
 *   - vgt-sections.css is scoped under `.vgt-sections` and is enqueued only on
 *     pages that render WPBakery sections. The homepage is a template page and
 *     is neither, so rules put there would never load and never match.
 *
 * Enqueued only when the page template is front-v3.tpl.php
 * (includes/zt-styles-scripts.php), and every selector below belongs to a
 * component that exists nowhere else on the site, so nothing can leak.
 *
 * CASCADE: this loads AFTER vgtme.css, which is the same order the inline block
 * had relative to pages.css in the build. Verify changes against rendered
 * output (node verify.mjs), not by reading rules.
 *
 * @package VGTransportME
 */

/* ---------- Hero: the wide company-level slide (v3's first slide) ---------- */
.slide.wide .hero-content{max-width:900px}
.slide.wide .hero-content h1{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.slide.wide .hero-content p{font-size:1.06rem;max-width:640px}

/* ---------- Service chooser ----------
   Deliberately dark so it does not read as a second zone band. */
.svc-chooser{background:var(--ink);color:#fff;padding:82px 0;position:relative;z-index:21}
.chooser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px}
.chooser-head h2{color:#fff;font-family:var(--ff-head);font-size:2.4rem;font-weight:700;line-height:1.12;letter-spacing:-.01em}
.chooser-head .lead-note{color:rgba(255,255,255,.55);font-size:.95rem;line-height:1.7;max-width:400px;flex:none}
.chooser-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.ch{padding:0 40px;border-left:1px solid rgba(255,255,255,.13);display:flex;flex-direction:column}
.ch:first-child{border-left:none;padding-left:0}
.ch:last-child{padding-right:0}
.ch .num{font-family:var(--ff-head);font-weight:700;font-size:.78rem;letter-spacing:.22em;color:var(--gold);margin-bottom:16px}
.ch h3{color:#fff;font-size:1.5rem;line-height:1.25;margin-bottom:12px}

/* French titles wrap to two lines; reserve the second line only there, so the
   three columns stay aligned in FR without a dead line of space in EN.
   PREFIX MATCH ON PURPOSE. The build could hard-code html[lang="fr"]; WordPress
   cannot. Polylang emits the full locale through language_attributes() — this
   install renders lang="fr-FR" (and lang="en-CA") — so an exact match silently
   never fires and the three FR buttons fall out of line. Keep the ^= . */
html[lang^="fr"] .ch h3{min-height:2.5em}

.ch p{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.75;margin-bottom:26px;flex:1 1 auto}
.ch .btn{align-self:flex-start;white-space:normal;text-align:center;line-height:1.35}
.ch .btn-line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.ch .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-3px)}

/* Reserves the second caption line so a one-line and a two-line caption still
   put the three columns' bottom edges level. Load-bearing — see above. */
.ch .how{display:block;margin-top:14px;font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.55;min-height:2.6em}
.ch .how b{color:var(--gold-light);font-weight:700}

@media(max-width:992px){
/* Columns stack, so both min-heights become dead space and are reset. */
html[lang^="fr"] .ch h3{min-height:0}
.ch .how{min-height:0}
.chooser-head{display:block}
.chooser-head .lead-note{margin-top:14px;max-width:none}
.chooser-grid{grid-template-columns:1fr}
.ch{padding:30px 0;border-left:none;border-top:1px solid rgba(255,255,255,.13)}
.ch:first-child{padding-top:0;border-top:none}
.ch:last-child{padding-bottom:0}
}