/* ============================================================
   private-fleets.css — Mastery Logistics Systems
   Private Fleets (Who We Serve) page-specific styles.
   Global styles live in style.css.
   Desktop styles first. Mobile overrides at the bottom.

   COMPONENT REUSE:
   - .visual-frame — dark rounded frame that hosts block visuals.
   - .cta-banner — standard closing CTA.
   - .feature — shared feature block system with --warm,
     --reverse, --stacked variants.

   NEW COMPONENTS INTRODUCED HERE:
   - .pf-hero — hero with photo on the right.
   - .feature--stacked — single-column centered layout (Section 3).
   - .backhaul-img / .freight-board-img — animated continuous-move loop (self-contained SVG).
   - .beforeafter-vis — messy legacy tools → single MasterMind.
   - .automate-vis — automated workflow step list.
   - .stories — customer story cards + logo strip combined block.
   - .story-card — press-release-style article card.

   PAGE STRUCTURE:
   1. Hero (dark, photo right)
   2. Turn empty miles into revenue (white, content L / vis R)
   3. Replace the stack (warm, STACKED — paragraph + wide visual)
   4. Free your team (white, content L / vis R)
   5. Serve the business (warm, alt — vis L / content R)
   6. Dave Cruz quote (warm, glyph backdrop)
   7. Customer stories + logo strip (white)
   8. CTA banner (dark)
============================================================ */

/* ============================================================
   SECTION 1 — HERO
   Dark. Two-column with photo right.
============================================================ */
.pf-hero {
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.pf-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(178, 93, 66, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.pf-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.pf-hero__content {
  max-width: 480px;
}

.pf-hero__headline {
  font-size: var(--font-size-h1);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.pf-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  max-width: 460px;
}

.pf-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pf-hero__media {
  position: relative;
  width: 100%;
}

.pf-hero__photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* The hero visual is a drawn graphic rather than a photograph, so it keeps
   its own near-square proportions instead of being cropped to 16/11, and
   holds its drawn width rather than stretching across the column. Its
   background is transparent, so the copper glow is the dark-section
   treatment rather than a black drop shadow. */
.pf-hero__graphic {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 20px rgba(252, 147, 101, 0.35))
          drop-shadow(0 0 50px rgba(252, 147, 101, 0.18));
}

/* Section 5 visual. Drawn artwork on a transparent canvas, so the shadow
   is a drop-shadow filter that follows the drawing rather than boxing the
   empty canvas. The section is light warm, so it is the black treatment
   rather than the copper glow used on the dark hero above. */
.feature__image {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}

.pf-hero .eyebrow {
  color: var(--color-copper-light);
}

/* ============================================================
   SECTIONS 2–5 — FEATURE BLOCKS
   Standard system: .feature (white) / .feature--warm (warm) /
   .feature--reverse (vis left, content right) /
   .feature--stacked (single-column centered).
============================================================ */
.feature {
  background: var(--color-white);
}

.feature--warm {
  background: #faf6f3;
}

.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
}

.feature--reverse .feature__content {
  order: 2;
}

.feature--reverse .feature__media {
  order: 1;
}

/* Single-column stacked variant (Section 3) */
.feature--stacked .feature__inner {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  gap: 2.5rem;
}

.feature--stacked .feature__content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.feature--stacked .feature__media {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.feature__heading {
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 1.25rem;
}

.feature__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.feature__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(178, 93, 66, 0.12);
  color: var(--color-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.feature__paragraph {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--color-copper-dark);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color var(--transition-fast);
}

.feature__link:hover {
  color: var(--color-copper-darker);
}

.feature__link-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.feature__link:hover .feature__link-arrow {
  transform: translateX(3px);
}

.feature__media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- VISUAL FRAME ----- */
.visual-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(252, 147, 101, 0.14), transparent 65%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.visual-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.visual-frame--wide {
  aspect-ratio: 16 / 9;
  padding: 1.75rem;
}

/* ----- SECTION 2 — BACKHAUL LOOP VISUAL -----
   Self-contained animated SVG with its own dark card background. */
.backhaul-img,
.freight-board-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.18));
}

/* ----- SECTION 3 — BEFORE/AFTER VISUAL ----- */
.beforeafter-vis {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

.beforeafter-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- SECTION 4 — AUTOMATED FLOW STEPS ----- */
.automate-vis {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 360px;
}

.automate-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(178, 93, 66, 0.05);
  border: 0.5px solid rgba(178, 93, 66, 0.2);
  border-radius: 8px;
}

.automate-step__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fc9365, #b25d42);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}

.automate-step__label {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  flex: 1;
}

.automate-step__tag {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
  font-weight: var(--weight-bold);
  padding: 0.1875rem 0.5rem;
  background: rgba(178, 93, 66, 0.1);
  border-radius: 3px;
}

/* ============================================================
   SECTION 7 — CUSTOMER STORIES + LOGO STRIP
   White. Two article cards followed by a "Trusted by" strip.
============================================================ */
.stories {
  background: var(--color-white);
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
}

.stories__head {
  max-width: 680px;
  margin: 0 auto 2rem;
}

.stories__head .eyebrow {
  color: var(--color-copper-dark);
}

.stories__heading {
  color: var(--color-text-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.5rem;
}

.stories__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto 3rem;
}

.story-card {
  background: var(--color-white);
  border: 0.5px solid rgba(178, 93, 66, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.story-card:hover {
  border-color: rgba(178, 93, 66, 0.4);
  box-shadow: 0 8px 24px rgba(178, 93, 66, 0.08);
}

.story-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #e8ddd4, #d4c8bf);
  border-bottom: 0.5px solid rgba(178, 93, 66, 0.15);
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.story-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-card__thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-card__thumb-glyph {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 32px;
  height: 32px;
  opacity: 0.35;
}

.story-card__thumb-glyph svg {
  width: 100%;
  height: 100%;
}

.story-card__thumb-label {
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.5);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.story-card__body {
  padding: 1.25rem 1.375rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.story-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
  font-weight: var(--weight-bold);
  background: rgba(178, 93, 66, 0.08);
  padding: 0.1875rem 0.5rem;
  border-radius: 3px;
}

.story-card__headline {
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.story-card__excerpt {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
}

.story-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-copper);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  margin-top: auto;
  transition: color var(--transition-fast);
}

.story-card__link:hover {
  color: var(--color-copper-dark);
}

.story-card__link-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.story-card__link:hover .story-card__link-arrow {
  transform: translateX(3px);
}

/* ============================================================
   SECTION 8 — CTA BANNER
   Dark. Standard closing.
============================================================ */
.cta-banner {
  background: #0a0a0a;
  border-top: 0.5px solid #1f1f1f;
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(178, 93, 66, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  margin-bottom: 1rem;
}

/* ============================================================
   RESPONSIVE — MOBILE OVERRIDES
============================================================ */
@media (max-width: 768px) {

  /* Hero */
  .pf-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Single column, with the CTA below the visual rather than above
     it. .pf-hero__actions is nested inside .pf-hero__content, so it
     cannot be ordered past .pf-hero__media on its own; display:
     contents lifts the copy's children into the hero grid so all five
     can be ordered together. The wrapper is a plain div, so nothing
     is lost from the accessibility tree.

     Row gap drops to 0 because it would otherwise apply between every
     line of copy, not just between the blocks. Each element's own
     margins space them, exactly as they do on desktop. */
  .pf-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .pf-hero__content {
    display: contents;
  }

  .pf-hero .eyebrow {
    order: 1;
  }

  .pf-hero__headline {
    order: 2;
  }

  .pf-hero__sub {
    order: 3;
  }

  .pf-hero__media {
    order: 4;
  }

  .pf-hero__actions {
    order: 5;
    margin-top: 2rem;
    flex-direction: column;
    align-items: stretch;
  }

  .pf-hero__actions > a {
    text-align: center;
    justify-content: center;
  }

  /* Feature blocks - single column: copy, then the visual, then the CTA.
     The text column stops being its own box so its children lay out in the
     stack, which puts the CTA below the visual. The reversed variant is
     named explicitly because its desktop order uses two classes and would
     otherwise win on specificity. */
  .feature__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .feature__content {
    display: contents;
  }

  .feature__media,
  .feature--reverse .feature__media {
    order: 1;
    margin: 0.5rem 0;
  }

  .feature__link,
  .feature--reverse .feature__link {
    order: 2;
    align-self: flex-start;
    margin-top: 1.5rem;
  }

  /* The stacked variant centres its copy; keep that now the column box is gone. */
  .feature--stacked .feature__heading,
  .feature--stacked .feature__paragraph {
    text-align: center;
  }

  .feature--stacked .feature__link {
    align-self: center;
  }

  /* Stacked variant — already single column, but tighter gap */
  /* The stack spaces itself with element margins now, so a gap here would
     double up between the copy, the visual and the CTA. */
  .feature--stacked .feature__inner {
    gap: 0;
  }

  .feature--stacked .feature__media {
    margin: 2rem auto 0.5rem;
  }

  /* Stories */
  .stories__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stories__heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* CTA */
  .cta-banner__heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

}