/**
 * Shared Hero Section Component
 * ------------------------------
 * One CSS file for every page hero (Case Studies, Career, Team, About Us,
 * Resources, and any future page). Enqueued globally in functions.php
 * (ph4_enqueue_assets()), alongside header/footer CSS, so it's always
 * available before any page-level component CSS loads.
 *
 * To add a hero to a new page:
 *   1. This file is already enqueued site-wide — never touch it for a
 *      new page.
 *   2. Copy the hero markup block from any existing hero template
 *      (Team-Page-Files/TEAM-HERO.php is the simplest reference — it's
 *      just a hero, nothing else attached) and swap the content/data
 *      source (am_get_hero_content( 'your-page-key' )).
 *   3. Wrap it in your own page's `-page` wrapper div for the
 *      background (see any of the five existing *-page wrapper CSS
 *      files for the ~15-line pattern).
 *
 * Markup contract:
 *   .ph-hero
 *     .ph-hero-left
 *       .ph-hero-eyebrow > .ph-hero-dot + <span>
 *       .ph-hero-headline (h1)
 *       .ph-hero-sub (p)
 *       .ph-hero-ctas > .ph-hero-btn.ph-hero-primary / .ph-hero-btn.ph-hero-ghost
 *       .ph-hero-trust > .ph-hero-pulse + text
 *     .ph-hero-right
 *       .ph-hero-track
 *         .ph-hero-tile > img   (repeated, plus cloned tiles for the loop)
 */

.ph-hero{
  --ph-hero-ink: var(--color-primary-black);
  --ph-hero-paper: var(--color-neutral-paper);
  --ph-hero-line: var(--color-neutral-line);
  --ph-hero-line-strong: var(--color-neutral-line-strong);
  --ph-hero-brass: var(--color-primary-orange);
  --ph-hero-sage: var(--color-neutral-muted);

  max-width:1440px; margin:0 auto; height:720px; display:flex; align-items:stretch;
  gap:56px; padding:64px 40px; position:relative;
  color: var(--ph-hero-paper);
  font-family: var(--font-body);
}
.ph-hero, .ph-hero *{ box-sizing:border-box; }

.ph-hero-left{ flex:1 1 58%; display:flex; flex-direction:column; justify-content:flex-start; min-width:0; padding-top: var(--amm-header-h); }
.ph-hero-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.ph-hero-dot{ width:6px; height:6px; border-radius:50%; background:var(--ph-hero-brass); flex-shrink:0; }
.ph-hero-eyebrow span{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ph-hero-sage); }
.ph-hero-headline{
  font-family: var(--font-heading); font-weight:500; font-style:var(--font-style-heading,italic); text-transform:uppercase;
  font-size:clamp(32px, 5.2vw, 68px); line-height:1.04; letter-spacing:-0.01em; margin:0 0 24px; max-width:100%; /* previous value max-width:15ch*/
}
.ph-hero-sub{ font-size:15.5px; line-height:1.7; color:color-mix(in srgb, var(--color-neutral-paper) 80%, transparent); max-width:46ch; margin:0 0 36px; }
.ph-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.ph-hero-btn{
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 24px; border-radius:2px; cursor:pointer; border:1px solid var(--ph-hero-line-strong);
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
}
.ph-hero-btn svg{ width:13px; height:13px; transition:transform .2s ease; }
.ph-hero-btn.ph-hero-primary{ background:var(--ph-hero-paper); color:var(--ph-hero-ink); border-color:var(--ph-hero-paper); font-weight: 600; }
.ph-hero-btn.ph-hero-primary:hover{ background-color:var(--ph-hero-brass); border-color:var(--ph-hero-brass); color: var(--color-neutral-paper);}
.ph-hero-btn.ph-hero-primary:hover svg{ transform:translateX(3px); }
.ph-hero-btn.ph-hero-ghost{ background:transparent; color:var(--ph-hero-paper); }
.ph-hero-btn.ph-hero-ghost:hover{ background:color-mix(in srgb, var(--color-neutral-paper) 8%, transparent); border-color:var(--ph-hero-paper); }

.ph-hero-trust{
  display:inline-flex; align-items:center; gap:9px; width:fit-content;
  font-size:11px; letter-spacing:0.05em; color:var(--ph-hero-paper);
  border:1px solid var(--ph-hero-line); border-radius:20px; padding:7px 15px 7px 11px;
}
.ph-hero-pulse{ width:7px; height:7px; border-radius:50%; background:var(--ph-hero-brass); animation:ph-hero-pulse-glow 2.2s ease-out infinite; }
@keyframes ph-hero-pulse-glow{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--color-primary-orange) 50%, transparent); }
  70%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--color-primary-orange) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--color-primary-orange) 0%, transparent); }
}
.ph-hero-right{ flex:1 1 38%; min-width:0; overflow:hidden; margin:-64px -40px -64px 0; padding-right:40px; }
.ph-hero-track{ display:flex; flex-direction:column; gap:10px; animation: ph-hero-scroll 28s linear infinite; }
.ph-hero-tile{ width:100%; aspect-ratio:9/5; overflow:hidden; flex-shrink:0; }
.ph-hero-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes ph-hero-scroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion: reduce){ .ph-hero-track{ animation:none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .ph-hero{ flex-direction:column; height:auto; padding:48px 24px; gap:32px; }
  .ph-hero-left{ flex:none; }
  .ph-hero-right{ flex:none; height:320px; margin:0 -24px -48px -24px; padding:10px; }
}


/* ---------- MOBILE HERO CTA BUTTONS ---------- */
@media (max-width: 600px) {

    .ph-hero-ctas {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin-bottom: 32px;
    }

    .ph-hero-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        text-align: center;
        padding: 13px 8px;
        font-size: 10px;
        letter-spacing: 0.04em;
        gap: 5px;
    }

    .ph-hero-btn svg {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

}