/*
 * <section class="tailwinds"> — a tall (~860px) full-bleed background image
 * with a bottom-anchored heading and a 4-cell grid. The inner is inset to
 * --content-edge so the heading and grid line up with the hero text (NOT the
 * tram lines). The grid draws its own full border box + interior dividers, and
 * orange squares mark every line crossing (5 verticals × top & bottom). First
 * used on industry.html.
 */
.tailwinds {
  position: relative;
  min-height: 860px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* anchor the content to the bottom */
  background-image: url('../images/f-car-rear.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tailwinds__inner {
  padding: 0 var(--content-edge) 50px;   /* ~50px above the section bottom */
}

.tailwinds__heading {
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 42px;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 40px;
  max-width: 1100px;
}

/* 4-cell grid. Inset from the tram lines, so it draws its own full border box
   plus the three interior dividers. */
.tailwinds__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tailwinds__cell {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
}
.tailwinds__cell + .tailwinds__cell {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.tailwinds__num {
  font-family: var(--font-pixel);   /* Geist Pixel */
  font-size: 32px;
  line-height: 1;
  color: var(--white);
}

.tailwinds__text {
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 32px;
  line-height: 1.15;
  color: var(--white);
  margin: auto 0 0;            /* push text to the bottom of the cell */
}

/* Orange squares at every rule/line crossing. */
.tw-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--orange);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.tw-node--t { top: 0; }
.tw-node--b { top: 100%; }
.tw-node--0 { left: 0; }
.tw-node--1 { left: 25%; }
.tw-node--2 { left: 50%; }
.tw-node--3 { left: 75%; }
.tw-node--4 { left: 100%; }

/* ── Mobile (≤720px) ──────────────────────────────────────────────────────
 * The 4-up bordered grid can't fit a phone. Keep the background image, but
 * top-align the content (instead of bottom-anchoring it) and turn the cells
 * into a plain vertical list: no border box, no interior dividers, no crossing
 * nodes — just thin horizontal rules between rows. A scrim keeps the white text
 * legible over the lighter top of the photo where the content now sits.
 */
@media (max-width: 720px) {
  .tailwinds {
    min-height: 0;
    justify-content: flex-start;
  }

  .tailwinds::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.4));
    pointer-events: none;
  }

  .tailwinds__inner {
    position: relative;   /* lift above the scrim */
    padding: 56px 20px 64px;
  }

  .tailwinds__heading {
    font-size: 28px;
    margin-bottom: 20px;
  }

  /* List, not boxes: single column, drop the grid's own border. */
  .tailwinds__grid {
    grid-template-columns: 1fr;
    border: none;
  }

  .tailwinds__cell {
    min-height: 0;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }
  .tailwinds__cell + .tailwinds__cell {
    border-left: none;   /* clear the desktop vertical divider */
  }

  .tailwinds__num {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .tailwinds__text {
    font-size: 20px;
    margin: 0;           /* cancel the desktop bottom-align */
  }

  /* Crossing nodes belong to the grid border box — gone in list mode. */
  .tw-node { display: none; }
}