/* ===========================================================================
 * home.css — the Home page (templates/home.php).
 *
 * This site is a single page, so this file is both the home shell and the
 * page's own stylesheet; there is no interior.css consumer yet. Everything
 * below is scoped to a section class from the template.
 *
 * Section order matches the source page:
 *   .home-hero      → page-hero
 *   .quote-bar      → intro-content
 *   .intro          → portable-storage-containers-for-sale-or
 *   .containers     → overlay-content
 *   .benefits       → steel-shipping-container-benefits
 *   .quote-form     → form-section
 * ======================================================================== */

body.home,
body.page-template-home {
  --home-bg: var(--bg);
  background: var(--home-bg);
}

/* ---------------------------------------------------------------------------
 * Hero band — a photograph and nothing else. The page's real title lives two
 * sections down, which is why this carries no heading and no landmark.
 * ------------------------------------------------------------------------ */
.home-hero {
  position: relative;
  height: clamp(195px, 30vw, 395px);
  overflow: hidden;
}

.home-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--black-rgb), 0.15);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Quote CTA bar — the mid-blue band directly under the hero.
 * ------------------------------------------------------------------------ */
.quote-bar {
  background: var(--brand-accent);
  color: var(--white);
  padding-block: 2.25em;
}

.quote-bar__inner {
  text-align: center;
}

.quote-bar__tagline {
  margin: 0 auto 10px;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------------------------------------------------------------------------
 * Intro + highlights — the page h1, a lead paragraph, then four icon items in
 * two columns. The content measure here is narrower than the page container.
 * ------------------------------------------------------------------------ */
.intro {
  --intro-measure: 62.5rem; /* 1000px — the source's narrow wrap */
  background: var(--bg);
  padding-block: 4em;
}

.intro__inner {
  max-width: calc(var(--intro-measure) + var(--gutter) * 2);
  text-align: center;
}

.intro__title {
  margin: 0 auto 0.5em;
}

.intro__lead {
  margin: 0 auto 2em;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.intro__highlights {
  list-style: none;
  margin: 3em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 1.75em;
  text-align: left;
}

/* The two columns are padded away from the centre line rather than separated by
   a wide gap — the design keeps each item's text block at ~405px. */
.intro__highlights .highlight:nth-child(odd) {
  padding-right: 39px;
}

.intro__highlights .highlight:nth-child(even) {
  padding-left: 40px;
}

.highlight {
  display: flex;
  align-items: flex-start;
}

.highlight > .cnm-icon {
  flex: 0 0 35px;
  width: 35px;
  font-size: 28px;
  margin: 4px 0.5em 0 0;
  /* The mark is painted by `background-color: currentColor` (assets/css/
     icons.css), so this `color` IS the icon's colour and nothing else here
     reads it. --brand-dark, not --brand-light: the source site draws these
     marks on its dark axis, and the blue was carrying the eyebrow's colour
     into a place the source never had blue. */
  color: var(--brand-dark);
}

.highlight__body {
  flex: 1 1 auto;
}

.highlight__title {
  margin: 0 0 0.5em;
  font-family: var(--sans);
  font-size: clamp(1.375rem, 1.94vw, 1.75rem);
  font-weight: 700;
  line-height: normal;
  color: var(--brand-light);
}

.highlight__body p {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--neutral-dark);
}

/* ---------------------------------------------------------------------------
 * Container catalogue — two card grids sharing one photographic band.
 * ------------------------------------------------------------------------ */
.containers {
  --containers-scrim: rgba(34, 30, 24, 0.6);
  position: relative;
  padding-block: 4em;
  background-image: url("../img/container.jpg");
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.containers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--containers-scrim);
}

.containers__inner {
  position: relative;
}

.containers__title {
  margin: 0 auto 60px;
  line-height: 1.5;
  border-bottom: 2px solid var(--white);
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
}

.containers__title--second {
  margin-top: 60px;
}

.containers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4.51%;
  row-gap: 4.5rem;
  /* The design leaves a row of breathing space under the grid; padding rather
     than margin so it cannot collapse into the next heading's margin-top. */
  padding-bottom: 1em;
}

/* The card's top border is drawn by the title's two rules, so the box itself
   has none — the title straddles the line the way the design draws it. */
.container-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--white);
  border-top: none;
  text-align: center;
}

.container-card__title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-family: var(--heading);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.5;
  color: var(--brand-light);
}

.container-card__title::before,
.container-card__title::after {
  content: '';
  display: block;
  width: 50%;
  height: 2px;
  background: var(--white);
}

.container-card__title span {
  padding: 0 0.5em;
  white-space: nowrap;
}

/* The PhotoSwipe group. `.cnm-gallery` is the seam assets/js/lightbox.js binds
 * (one binding, every gallery on the page its own group), so the card's photo
 * strip IS the list — there is no per-card id anywhere. The source site drew
 * one thumbnail per card and hid the rest behind fancybox; the extras below
 * keep that arrangement, as anchors PhotoSwipe enumerates but the layout never
 * shows. They carry no <img>, so the design pays no bytes for a photograph a
 * visitor may never open. */
.container-card__media {
  display: block;
  padding: 40px 30px 0;
  line-height: 0;
  list-style: none;
  margin: 0;
}

.container-card__shot > a {
  display: block;
  line-height: 0;
}

/* display:none, not visually-hidden: PhotoSwipe still finds these anchors with
 * querySelectorAll, while the a11y tree and the tab order stay clean. A
 * focusable link with no visible affordance would be two dead tab stops per
 * card. */
.container-card__shot--extra {
  display: none;
}

.container-card__media img {
  width: 100%;
  max-width: 325px;
  height: 200px;
  object-fit: cover;
  margin-inline: auto;
}

.container-card__caption {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
}

.container-card__specs {
  flex: 1 1 auto;
  list-style: none;
  margin: 2.5em 2em 3em;
  padding: 0;
  text-align: left;
}

.container-card__specs li {
  display: flex;
  margin: 1.5em 0;
}

.container-card__specs .cnm-icon {
  flex: 0 0 auto;
  font-size: 20px;
  margin: 3px 1em 0 0;
  color: var(--brand-light);
}

.container-card__specs span {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

.container-card__cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  transform: translateY(50%);
  width: 90%;
  max-width: 210px;
}

/* ---------------------------------------------------------------------------
 * Benefits — four blurbs flanking a centred product photograph, joined by the
 * curved connector the source draws with one image, mirrored per corner.
 * ------------------------------------------------------------------------ */
.benefits {
  background: var(--bg);
  padding-block: 4em;
}

.benefits__title {
  margin: 0 auto 0.5em;
  text-align: center;
}

.benefits__grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: stretch;
}

.benefits__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.benefits__col--left {
  text-align: left;
}

.benefits__col--right {
  text-align: right;
}

.benefit__title {
  margin: 0 auto 0.5em;
  font-family: var(--sans);
  font-size: clamp(1.375rem, 1.94vw, 1.75rem);
  font-weight: 700;
  line-height: normal;
  color: var(--brand-light);
}

.benefit p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}

.benefits__col .benefit:first-child::after,
.benefits__col .benefit:last-child::before {
  content: '';
  display: block;
  height: 60px;
  margin: 0.5em 0;
  background-image: url("../img/curved-line.png");
  background-repeat: no-repeat;
  background-position: center right;
}

.benefits__col--left .benefit:last-child::before {
  transform: scaleX(-1) rotate(-180deg);
}

.benefits__col--right .benefit:first-child::after {
  transform: scaleX(-1);
}

.benefits__col--right .benefit:last-child::before {
  transform: rotate(180deg);
}

.benefits__media {
  align-self: center;
  padding-block: 1.5em;
}

.benefits__media img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Quote request form — the mid-blue closing band. The form itself is Gravity
 * Forms; only the band, the heading and the layout of the row belong here.
 * ------------------------------------------------------------------------ */
.quote-form {
  background: var(--brand-accent);
  color: var(--white);
  padding-block: 4em;
}

.quote-form__title {
  margin: 0 auto 42px;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* The house idiom for part of a heading styled differently is
   `<span class="accent">`, not <strong>: cnm_starter_field_display() runs
   wp_kses with an allow-list of <br> and <span class> only, so a <strong>
   seeded into a block attribute is stripped on render. The emphasis here is
   typographic, not semantic — a screen reader stressing two words of a headline
   for no reason is worse — so the span is also the better answer. */
.quote-form__title .accent {
  font-weight: 700;
}

/* The form sits on a narrower measure than the band's container. */
.quote-form__body {
  --quote-form-measure: 62.5rem; /* 1000px */
  --quote-control-h: 50px;
  --quote-choice-box: 22px;
  max-width: var(--quote-form-measure);
  margin-inline: auto;
}

.quote-form .gform_wrapper {
  --gf-color-primary: var(--brand-dark);
  --gf-color-primary-darker: var(--black);
  color: var(--white);
}

.quote-form .gform_wrapper .gform_fields {
  row-gap: 15px;
  column-gap: 15px;
}

.quote-form .gform_wrapper .gfield_label,
.quote-form .gform_wrapper legend.gfield_label {
  font-family: var(--sans);
  /* 21px — the source sets `.container__quote { font-size: 21px }` and neither
     the legend nor the choice labels override it, so every visible word in this
     form is 21px. Only the legend ("Choose a Container:") is actually seen; the
     field labels are screen-reader-only. */
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
  color: var(--white);
}

/* Gravity Forms ships `.gform-theme--framework ::placeholder { color: unset }`,
   which makes every placeholder inherit the control's own text colour — black
   on white. The source form set no placeholder colour at all and therefore
   rendered the browser default, measured in Chrome as rgb(117, 117, 117). This
   restores that default rather than introducing a new design colour, which is
   why the value is a literal and not a token. */
.quote-form .gform_wrapper input::placeholder,
.quote-form .gform_wrapper textarea::placeholder {
  color: rgb(117, 117, 117) !important;
  opacity: 1;
}

/* The design marks no field as required in the interface — the source form
   validated on submit and showed nothing until then. `aria-required` stays on
   every control, so only the visual marker goes. */
.quote-form .gform_wrapper .gfield_required {
  display: none;
}

/* Controls: square, borderless, white — 50px tall like the design draws them. */
.quote-form .gform_wrapper input[type="text"],
.quote-form .gform_wrapper input[type="email"],
.quote-form .gform_wrapper input[type="tel"],
.quote-form .gform_wrapper textarea {
  border: none;
  border-radius: 0;
  background: var(--form-bg);
  color: var(--form-text);
  font-family: var(--sans);
  font-size: 1.125rem;
  padding: 0 1em;
}

.quote-form .gform_wrapper input[type="text"],
.quote-form .gform_wrapper input[type="email"],
.quote-form .gform_wrapper input[type="tel"] {
  height: var(--quote-control-h);
  block-size: var(--quote-control-h);
}

.quote-form .gform_wrapper textarea {
  height: 97px;
  block-size: 97px;
  min-height: 0;
  padding: 1em;
}

/* The container choice: label at the left, the four options spread across the
   rest of the row, each a square box rather than the orbital theme's pill. */
.quote-form .gform_wrapper .gfield--type-radio {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quote-form .gform_wrapper .gfield--type-radio .gfield_label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.quote-form .gform_wrapper .gfield--type-radio .ginput_container_radio {
  flex: 1 1 auto;
}

/* Gravity Forms' orbital framework stacks the choices in a column and sizes its
   controls from `--gf-local-*` values it sets inside its own rules. Those rules
   load after the theme and outrank ordinary page CSS, so the handful of
   declarations that have to beat them carry `!important` — the same approach
   forms.css already takes for the inline-form helper. Everything the framework
   does NOT fight (colour, family, the square choice boxes) stays normal CSS. */
.quote-form .gform_wrapper .gfield_radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem !important;
}

.quote-form .gform_wrapper .gfield_radio .gchoice {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.quote-form .gform_wrapper .gfield_radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--quote-choice-box);
  height: var(--quote-choice-box);
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--white);
  cursor: pointer;
}

.quote-form .gform_wrapper .gfield_radio input[type="radio"]:checked {
  background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--white);
}

.quote-form .gform_wrapper .gfield_radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.quote-form .gform_wrapper .gfield_radio label {
  margin: 0;
  font-family: var(--sans);
  /* 21px, inherited from `.container__quote` in the source — see the legend
     rule above. */
  font-size: 1.3125rem;
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
}

.quote-form .gform_wrapper .gform_footer {
  justify-content: center;
  padding: 0;
  margin-top: 21px;
}

.quote-form .gform_wrapper.gform-theme .gform_footer input.gform_button,
.quote-form .gform_wrapper.gform-theme .gform_button {
  border: none;
  border-radius: 0;
  height: 47px !important;
  block-size: 47px !important;
  min-height: 47px;
  padding: 0 2em;
  background: var(--button-bg) !important;
  color: var(--button-text);
  font-family: var(--sans);
  /* `!important` for the same reason the four declarations above carry it, and
     these two were the ones it was missing: the orbital framework sets its own
     text-transform and font-weight on submit buttons, from rules that load
     after this file, so without it the button rendered sentence-case at
     weight 500 where the design draws UPPERCASE at 900. */
  font-weight: 900 !important;
  font-size: clamp(1rem, 1.39vw, 1.25rem) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.quote-form .gform_wrapper.gform-theme .gform_footer input.gform_button:hover,
.quote-form .gform_wrapper.gform-theme .gform_footer input.gform_button:focus-visible,
.quote-form .gform_wrapper.gform-theme .gform_button:hover,
.quote-form .gform_wrapper.gform-theme .gform_button:focus-visible {
  background: var(--button-bg-hover) !important;
}

/* ---------------------------------------------------------------------------
 * 1399 — laptop fine-tuning between the design width and tablet.
 * ------------------------------------------------------------------------ */
@media (max-width: 1399px) {
  .containers__grid {
    column-gap: 3.5%;
  }
}

/* ---------------------------------------------------------------------------
 * 991 — the container cards drop to two across; the benefit connectors still
 * have room, so they stay.
 * ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .container-card__specs {
    margin: 2.5em 1.5em 3em;
  }
}

/* ---------------------------------------------------------------------------
 * 881 — the container catalogue drops from three columns straight to one.
 *
 * Measured off the frozen snapshot, not invented: the source lays these cards
 * out as a float grid (`.grid-2 { width: 32.32% }`), so they reflow when the
 * card content stops fitting rather than at a declared breakpoint — three
 * across at 882px and one at 881px. There is no two-column step in the
 * original at any width, which is why there is none here.
 * ------------------------------------------------------------------------ */
@media (max-width: 881px) {
  .containers__grid {
    grid-template-columns: 1fr;
    row-gap: 5rem;
  }
}

/* ---------------------------------------------------------------------------
 * 767 — everything stacks. The benefit connectors are drawn for a three-column
 * layout and mean nothing in one column, so they go.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .intro,
  .containers,
  .benefits,
  .quote-form {
    padding-block: 2.5em;
  }

  .containers__grid {
    row-gap: 5rem;
  }

  .containers__title {
    margin-bottom: 44px;
  }

  .containers__title--second {
    margin-top: 44px;
  }

  .container-card__specs {
    margin: 2em 2em 3em;
  }

  .benefits__grid {
    grid-template-columns: 1fr;
    row-gap: 1.5em;
  }

  .benefits__col {
    justify-content: flex-start;
    gap: 1.5em;
  }

  .benefits__col--left,
  .benefits__col--right {
    text-align: center;
  }

  .benefits__col .benefit:first-child::after,
  .benefits__col .benefit:last-child::before {
    content: none;
  }

  .benefit__title {
    margin-inline: auto;
  }

  /* NO `order` here on purpose. The DOM already carries the source's sequence —
     two benefits, the photograph, two benefits — and stacking it unchanged is
     what the original renders at every narrow width. Hoisting the photograph
     above both columns (order: -1, which this block used to do) grouped all
     four blurbs into one run and made the section 249px shorter than the
     original at 375px. */


  .quote-form .gform_wrapper .gfield_radio {
    gap: 0.75rem 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * 575 — the narrow phone. Card padding tightens so the specs keep their
 * measure at 360px.
 * ------------------------------------------------------------------------ */
@media (max-width: 575px) {
  .container-card__media {
    padding: 32px 20px 0;
  }

  .container-card__specs {
    margin: 1.75em 1.25em 3em;
  }
}

/* ---------------------------------------------------------------------------
 * 640 — the intro highlights become one column.
 *
 * The source collapses them here and nowhere else (its own
 * `@media screen and (max-width: 640px)`), so they stay two across through the
 * whole tablet range. The odd/even padding above exists ONLY to hold the two
 * desktop columns off the centre line, so it is reset with them: in one column
 * it had nothing to do but misalign the list — the even items sat 40px further
 * right than the odd ones and the odd items lost 39px of measure, so four
 * highlights read as two staggered pairs.
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .intro__highlights {
    grid-template-columns: 1fr;
  }

  .intro__highlights .highlight:nth-child(odd),
  .intro__highlights .highlight:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
  }
}