/* Layout & Grid System for Jobdrive (Types A–J from RESPONSIVE-SPEC.md) */

/* Section Shell */
.jd-section {
  padding: 76px 0;
  position: relative;
  width: 100%;
}

.jd-section--compact {
  padding: 48px 0;
}

.jd-section--roomy {
  padding: 88px 0;
}

.jd-section--dark {
  background-color: var(--jd-contrast);
  color: #ffffff;
}

.jd-section--dark h1,
.jd-section--dark h2,
.jd-section--dark h3 {
  color: #ffffff;
}

.jd-section--dark p {
  color: var(--jd-muted);
}

.jd-section--tint {
  background-color: var(--jd-off-white);
}

.jd-section--gradient {
  background: var(--jd-gradient-cta);
  color: #ffffff;
}

.jd-section--gradient h1,
.jd-section--gradient h2,
.jd-section--gradient h3,
.jd-section--gradient p {
  color: #ffffff;
}

/* Container */
.jd-container {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Grid Type A & B: Split 2-Column Hero / Feature (Stacks below 1024px) */
.jd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.jd-split--ratio-60-40 {
  grid-template-columns: 1.2fr 0.8fr;
}

.jd-split--ratio-40-60 {
  grid-template-columns: 0.8fr 1.2fr;
}

@media (max-width: 1023px) {
  .jd-split,
  .jd-split--ratio-60-40,
  .jd-split--ratio-40-60 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Grid Type C: 2-Column Grid (Stacks below 768px) */
.jd-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 767px) {
  .jd-grid-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Grid Type D: 3-Column Grid (Stacks below 768px) */
.jd-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1023px) {
  .jd-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 639px) {
  .jd-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Grid Type E: Footer Grid */
.jd-grid-footer {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
}

@media (max-width: 1023px) {
  .jd-grid-footer {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 639px) {
  .jd-grid-footer {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Grid Type F: Interactive Tappable Slots (Never collapses to 1 column) */
.jd-slots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.jd-slots > * {
  min-width: 160px;
  min-height: 44px;
  flex-shrink: 0;
}

/* Grid Type G & H: Comparison & Pricing Tables */
.jd-compare-5 {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 16px;
}

.jd-compare-7 {
  display: grid;
  grid-template-columns: 2fr repeat(6, 1fr);
  gap: 12px;
  overflow-x: auto;
}

@media (max-width: 1023px) {
  .jd-compare-5,
  .jd-compare-7 {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

/* Grid Type I: Cost Bars */
.jd-cost-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: flex-end;
}

@media (max-width: 767px) {
  .jd-cost-bars {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Grid Type J: Comparison Rows */
.jd-comparison-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jd-comparison-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--jd-border-soft);
  align-items: center;
}

@media (max-width: 639px) {
  .jd-comparison-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Responsive grids on prototype markup
   ---------------------------------------------------------------------------
   The page patterns carry the design's exact desktop track lists. Those used to
   sit in an inline `grid-template-columns`, which no stylesheet can override, so
   every grid stayed multi-column down to 375px. Each element now publishes its
   track list as `--jd-cols` instead, and the rules below own the breakpoints.
   Desktop is byte-identical to the design; tablet and phone follow the
   prescriptions in RESPONSIVE-SPEC.md.
   --------------------------------------------------------------------------- */
.jd-rgrid { grid-template-columns: var(--jd-cols, 1fr); }

/*
 * Collapse points below are keyed to the track list each grid publishes, the
 * way the source site keys its rules to the inline grid string, so a grid
 * changes shape on the same pixel it does there.
 *
 * The distinction that matters: a ratio split (1.05fr .95fr and friends) is a
 * copy-plus-visual layout and stacks as soon as we leave desktop, but an even
 * `1fr 1fr` pair is a card row and stays two-up through tablet. Both wore
 * .jd-rgrid--split here and so both collapsed at tablet, which pulled 15 grids
 * a breakpoint early — the bulk of the tablet drift against the source.
 */

/* Types A & B — ratio splits: copy + visual. Stack below desktop. */
@media (max-width: 1024px) {
  .jd-rgrid--split:not([style*="--jd-cols: 1fr 1fr"]) { grid-template-columns: 1fr; }
}

/* Type C — even two-column rows, including the `1fr 1fr` splits. Hold two
   columns through tablet; one column on phones. */
@media (max-width: 767px) {
  .jd-rgrid--2,
  .jd-rgrid--split[style*="--jd-cols: 1fr 1fr"] { grid-template-columns: 1fr; }

  /*
   * Once stacked, the app mock goes above its prose on every step.
   * Alternating steps are authored text-first so the desktop layout zig-zags,
   * which on a phone left half the sections leading with a wall of copy and
   * half with the screenshot. Applies to Product Overview, About, Startups
   * and Staffing Agencies.
   */
  .jd-rgrid[style*="--jd-cols: 1fr 1fr"] > [style*="aspect-ratio"] {
    order: -1 !important;
  }

  /*
   * The same rule, twice more. The source writes it once per page and picks
   * whatever selector identifies that page's mock: an aspect-ratio box on
   * Product Overview and About, a shadowed card on Staffing Agencies, and
   * "the child without the heading in it" on Startups. Neither of the two
   * below is safe unscoped — plenty of grid children carry a box-shadow, and
   * still more have no h2 — so each is held to its own page.
   */
  .jobdrive-pattern-page-solutions-staffing
    .jd-rgrid[style*="--jd-cols: 1fr 1fr"] > [style*="box-shadow"] {
    order: -1 !important;
  }

  .jobdrive-pattern-page-solutions-startups
    .jd-rgrid[style*="--jd-cols: 1fr 1fr"] > div:not(:has(h2)) {
    order: -1 !important;
  }
}

/* Type D — three-column stat and card grids. */
@media (max-width: 1024px) { .jd-rgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .jd-rgrid--3 { grid-template-columns: 1fr; } }

/* Type E — footer. */
@media (max-width: 1024px) { .jd-rgrid--footer { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .jd-rgrid--footer { grid-template-columns: 1fr; } }

/* Type H — pricing plan cards. Two-up the moment we leave desktop, then one
   card per row from 1023 down (see the Pricing rules in components.css, which
   also drop the Enterprise card there). */
@media (max-width: 1024px) {
  .jd-rgrid--plans { grid-template-columns: repeat(2, 1fr); }
}

/* Subgrid rows only line up while the cards share one row; drop it once wrapped. */
@media (max-width: 1024px) {
  .jd-rgrid--plans > * { grid-template-rows: none !important; grid-row: auto !important; }
}

/* Type G — five-column comparison row.
   Deliberately has no collapse. The source never targets this grid at any
   breakpoint: it keeps all five columns down to 375, where they run about
   50px wide. Stacking it into labelled blocks below 1024, as this used to,
   put every column heading at the same x and lost the comparison the row
   exists to make. Used only by Solutions - High Volume Hiring. */

/* Type I — cost comparison bars. The 62px middle track is a spacer. */
@media (max-width: 767px) {
  .jd-rgrid--bars { grid-template-columns: 1fr; }
}

/* Type J — comparison table rows. */
@media (max-width: 767px) {
  .jd-rgrid--rows { grid-template-columns: 1fr; }
}

/* Nothing may push the page sideways on a phone. The source scopes this to
   every table, not a named few; a wide table scrolls inside itself rather than
   squeezing its columns into slivers. */
@media (max-width: 767px) {
  [class*="jobdrive-pattern-"] table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* ---------------------------------------------------------------------------
   Hero figure
   ---------------------------------------------------------------------------
   The rotator and its figures are authored at 600px. The source drops both to
   460px on phones so the artwork does not eat the fold; without it the hero
   pushed the copy and CTA off screen at 375.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* !important is load-bearing: both carry an inline height: 600px, which a
     plain rule cannot beat. */
  [data-hero-fig] { height: 460px !important; }

  [data-hero-rotator] {
    height: 460px !important;
    min-height: 0 !important;
  }
}