/*
 * Fuel Express inner-page styles (fx- namespace) — July 2026 redesign of
 * /about/, /fleet-fuel-cards/, /compare/, /gps-solutions/.
 * Companion to fx-aeo-home.css: that file defines the design tokens on
 * .fx-section (navy/orange/ink/slate/line/bg/radius, Montserrat) and this
 * file only consumes them — no new colors or fonts are introduced here.
 * Enqueued under the same condition as fx-aeo-home.css: any page whose
 * content uses an [fx_] element.
 */

/* ---------- page hero (compact inner-page variant) ---------- */
.fx-page-hero {
  background: linear-gradient(160deg, var(--fx-navy) 0%, var(--fx-navy-90) 100%);
  color: var(--fx-white);
  padding: 54px 0 48px; /* deliberately shorter than the homepage hero */
}
.fx-page-hero h1 { color: var(--fx-white); max-width: 22ch; }
.fx-page-hero .fx-lead { font-size: 1.18rem; color: #d6e0ee; max-width: 58ch; margin-bottom: 1.6rem; }
.fx-page-hero .fx-lead a { color: var(--fx-white); text-decoration: underline; }
.fx-page-hero .fx-ph-cta { margin: 0; }

/* background-image variant: full-bleed image behind a navy overlay (set via
   inline style on the section, mirroring the homepage hero). No side image,
   so the copy column and its lead span the full container width. */
.fx-page-hero.fx-ph-bg { padding: 78px 0 70px; }
.fx-ph-bg .fx-ph-grid { grid-template-columns: 1fr; }
.fx-ph-bg .fx-lead { max-width: none; }

.fx-ph-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.fx-ph-has-media .fx-ph-grid { grid-template-columns: 3fr 2fr; }
.fx-ph-media img, img.fx-ph-img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--fx-radius); box-shadow: 0 10px 30px rgba(2, 16, 38, .35);
}
.fx-ph-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px; }
.fx-ph-stats .fx-stat { border-left: 3px solid var(--fx-orange); padding-left: 14px; }
.fx-ph-stats .fx-num { font-size: 1.45rem; font-weight: 800; color: var(--fx-white); line-height: 1.15; }
.fx-ph-stats .fx-lbl { font-size: .84rem; color: #b8c6da; }
@media (max-width: 820px) {
  .fx-ph-has-media .fx-ph-grid { grid-template-columns: 1fr; }
  .fx-ph-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fx-ph-stats { grid-template-columns: 1fr; }
}

/* ---------- prose ---------- */
.fx-prose-body { max-width: inherit; }
.fx-prose-body h3 { margin-top: 1.6em; }
.fx-prose-body h3:first-child { margin-top: 0; }
.fx-prose-body ul { margin: 0 0 1rem 1.2rem; padding: 0; }
.fx-prose-body li { margin-bottom: .45rem; }

/* de-emphasized multi-column link lists (About vendors/resources) */
.fx-linkcols { columns: 3; column-gap: 34px; list-style: none; margin: 0; padding: 0; }
.fx-linkcols li { break-inside: avoid; margin: 0 0 .5rem; font-size: .88rem; line-height: 1.45; }
.fx-linkcols a { color: var(--fx-slate); }
.fx-linkcols a:hover { color: var(--fx-orange-dark); }
@media (max-width: 820px) { .fx-linkcols { columns: 2; } }
@media (max-width: 480px) { .fx-linkcols { columns: 1; } }

/* ---------- definition callout: two-column (shared fx_definition element) ----------
   Overrides the base .fx-definition-box rules in fx-aeo-home.css via higher
   specificity (loaded after). Full content-width card; the bolded answer stays
   the first node. An optional right column (points/image) fills the width when
   the instance sets one — otherwise the card is a single full-width column. */
.fx-definition { padding: 40px 0; }                 /* tighter than the 66px default */
.fx-definition .fx-eyebrow { margin-bottom: .5rem; }
.fx-definition h2 { margin-bottom: .65rem; }         /* pull the H2 close to the card */
.fx-definition .fx-definition-box {
  max-width: none;                                   /* remove the ~820px cap; fill the column */
  padding: 22px 28px;                                /* reduced top/bottom */
}
.fx-definition-box .fx-def-answer { margin: 0; font-weight: 700; color: var(--fx-ink); }
.fx-definition-box .fx-def-support { margin: .75rem 0 0; font-size: 1rem; font-weight: 400; color: var(--fx-slate); }

/* two-column mode — only when a right column is configured */
.fx-definition-box.fx-def-cols {
  display: grid; grid-template-columns: 3fr 2fr;      /* ~60% / 40% */
  gap: 32px; align-items: start;
}
.fx-def-main, .fx-def-side { min-width: 0; }          /* prevent grid overflow */
.fx-def-media { margin-bottom: 14px; }
.fx-def-media img { max-width: 100%; height: auto; display: block; border-radius: var(--fx-radius); }
.fx-def-points { list-style: none; margin: 0; padding: 0; }
.fx-def-points li { padding: 9px 0; border-top: 1px solid var(--fx-line); }
.fx-def-points li:first-child { border-top: none; padding-top: 0; }
.fx-def-plabel { display: block; font-weight: 700; color: var(--fx-navy); font-size: .95rem; }
.fx-def-ptext { display: block; color: var(--fx-slate); font-size: .88rem; line-height: 1.45; }
@media (max-width: 820px) {
  .fx-definition-box.fx-def-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- split rows ---------- */
.fx-split { padding: 44px 0; }
.fx-split-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 44px; align-items: center; }
.fx-split-imgright .fx-split-grid { grid-template-columns: 3fr 2fr; }
.fx-split-imgright .fx-split-media { order: 2; }
.fx-split-media img { max-width: 100%; height: auto; display: block; border-radius: var(--fx-radius); }
.fx-split-copy p { color: var(--fx-slate); }
.fx-split-copy p:last-child { margin-bottom: 0; }
.fx-split-cta { margin-top: 1.1rem; }
@media (max-width: 820px) {
  .fx-split-grid, .fx-split-imgright .fx-split-grid { grid-template-columns: 1fr; gap: 24px; }
  .fx-split-imgright .fx-split-media { order: 0; }
}

/* outline button (See Details style, used by split rows and cards) */
.fx-btn-outline {
  display: inline-block; background: transparent; color: var(--fx-navy) !important;
  font-weight: 700; font-size: .95rem; padding: 11px 22px; border-radius: 8px;
  border: 2px solid var(--fx-navy); transition: background .15s ease, color .15s ease;
}
.fx-btn-outline:hover { background: var(--fx-navy); color: var(--fx-white) !important; text-decoration: none; }

/* smaller filled button for card CTAs */
.fx-btn-sm { padding: 11px 22px; font-size: .95rem; }

/* ---------- solution cards ---------- */
.fx-scards-grid { display: grid; gap: 22px; }
.fx-scards-grid.fx-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fx-scards-grid.fx-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fx-scard {
  background: var(--fx-white); border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.fx-scard-media img { width: 100%; height: auto; display: block; }
.fx-scard-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.fx-scard-body h3 { margin-top: 0; }
.fx-scard-body h3 a { color: var(--fx-navy); }
.fx-scard-body h3 a:hover { color: var(--fx-orange-dark); text-decoration: none; }
.fx-scard-body p { font-size: .95rem; color: var(--fx-slate); margin-bottom: 1.2rem; }
.fx-scard-ctas { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) { .fx-scards-grid.fx-cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .fx-scards-grid.fx-cols-3, .fx-scards-grid.fx-cols-2 { grid-template-columns: 1fr; } }

/* ---------- industry grid (dense linked list) ---------- */
.fx-igrid-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 25px; }
.fx-igrid-item { border-top: 2px solid var(--fx-line); padding: 20px 0 15px; }
.fx-igrid-item h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .3em; }
.fx-igrid-item h3 a { color: var(--fx-navy); }
.fx-igrid-item h3 a:hover { color: var(--fx-orange-dark); }
.fx-igrid-item p { font-size: .85rem; color: var(--fx-slate); line-height: 1.5; margin: 0; }
@media (max-width: 980px) { .fx-igrid-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .fx-igrid-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fx-igrid-list { grid-template-columns: 1fr; } }

/* ---------- benefit list ---------- */
ul.fx-benefit-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 36px;
  list-style: none; margin: 0; padding: 0; max-width: 1000px;
}
ul.fx-benefit-list li { position: relative; padding-left: 30px; font-size: .97rem; color: var(--fx-slate); }
ul.fx-benefit-list li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 14px; height: 14px; border-radius: 3px; background: var(--fx-orange);
}
ul.fx-benefit-list strong { color: var(--fx-navy); display: block; margin-bottom: .15rem; }
@media (max-width: 680px) { ul.fx-benefit-list { grid-template-columns: 1fr; } }

/* ---------- value row (slim mid-page CTA) ---------- */
.fx-value-row { background: var(--fx-bg-band); padding: 38px 0; border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); }
.fx-vr-grid { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.fx-value-row h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0; }
.fx-vr-copy p { margin: .4rem 0 0; color: var(--fx-slate); font-size: .95rem; }
.fx-vr-cta { flex: 0 0 auto; }

/* ---------- inner-page heading overrides ----------
   Same matching-context rules as fx-aeo-home.css: the theme's
   `.innerpage #content-full h1/h2/h3` rules outrank plain .fx- selectors,
   so restore the hero's white H1 and the new sections' heading colors. */
.innerpage #content-full .fx-page-hero h1, .innerpage #content .fx-page-hero h1 { color: var(--fx-white); font-weight: 800; }
.innerpage #content-full .fx-value-row h2, .innerpage #content .fx-value-row h2 { color: var(--fx-navy); }

/* ---------- contained mode (sidebar templates, narrow #content) ---------- */
#content .fx-ph-grid, #content .fx-ph-has-media .fx-ph-grid { grid-template-columns: 1fr; }
#content .fx-ph-stats { grid-template-columns: repeat(2, 1fr); }
#content .fx-split-grid, #content .fx-split-imgright .fx-split-grid { grid-template-columns: 1fr; }
#content .fx-scards-grid.fx-cols-3, #content .fx-scards-grid.fx-cols-2 { grid-template-columns: 1fr; }
#content .fx-igrid-list { grid-template-columns: 1fr; }
#content ul.fx-benefit-list { grid-template-columns: 1fr; }
#content .fx-linkcols { columns: 1; }