/* Digital ads: the four boxes, the framework flight path and the quote */

/* 1. Intro on the left, a 2 × 2 grid of boxes on the right */

.ads-shifts {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
}
.shifts-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shifts-title { font-size: clamp(24px, 2.3vw, 36px); line-height: 1.12; }
.shifts-intro p {
  max-width: 24em;
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
}

.shifts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid rgba(16, 40, 76, .22);
  background: rgba(16, 40, 76, .22); /* the 1px gaps read as the grid lines */
}
.shift {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(280px, 40vh, 380px);
  margin: 0;
  padding: clamp(22px, 2.4vw, 40px);
  background: var(--paper);
  color: var(--navy);
  transition: background-color .35s ease, color .35s ease;
}
.shift:not(.shift-photo):hover { background: var(--navy); color: var(--white); }
.shift-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: auto;
  padding-bottom: 28px;
}
.shift-num { font-size: 14px; }
.shift-icon {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}
.shift h3 {
  margin: 0 0 .55em;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.shift p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* The photo box */
.shift-photo {
  padding: 0;
  overflow: hidden;
  background: var(--navy);
}
.shift-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2. The framework: steps climb from left to right along a dashed flight path */

.flight {
  position: relative;
  padding-top: 40px;
}
.flight-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.flight-path path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.js .flight-path { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s cubic-bezier(.65, 0, .35, 1) .2s; }
.js .is-in .flight-path { clip-path: inset(0 -10% 0 0); }

.flight-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flight-steps li {
  /* Each step sits higher than the last, climbing faster as it goes, like a growth curve
     (--k comes from digital.js: 1 for the first step, 0 for the last) */
  --rise: calc(var(--k) * 5 * clamp(26px, 4.5vh, 48px));
  margin-top: var(--rise);
}
.flight-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  isolation: isolate;
}
/* The number sits upright on a leaning parallelogram, like the menu buttons */
.flight-node::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  background: var(--navy);
  box-shadow: 0 0 0 6px var(--paper);
  transform: skewX(var(--lean));
}
.flight-label {
  display: block;
  max-width: 13em;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.35;
}
.js .flight-steps li { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--ease); }
.js .is-in .flight-steps li { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i) * .28s); }

/* The carpet arrives at the last step */
.flight-carpet {
  position: absolute;
  width: 64px;
  height: auto;
  opacity: 0;
  transform: translate(-10px, 10px);
  transition: opacity .6s ease 2.2s, transform .9s var(--ease) 2.2s;
  pointer-events: none;
}
.is-in .flight-carpet { opacity: 1; transform: none; }

/* 3. The quote: title on the left, drawn quotation marks and the words beside it */

.ads-quote {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 72px);
}
.quote { margin: 0; max-width: 40em; }
.quote-mark {
  display: block;
  width: 74px;
  height: auto;
  margin-bottom: 22px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.quote-mark path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.32, .72, 0, 1); }
.quote-mark path + path { transition-delay: .25s; }
.is-in .quote-mark path { stroke-dashoffset: 0; }

.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.015em;
}
/* A marker stroke sweeps across the key sentence */
.quote mark {
  background: linear-gradient(var(--sun), var(--sun)) 0 85% / 0 .42em no-repeat;
  color: inherit;
  transition: background-size 1.4s cubic-bezier(.32, .72, 0, 1) .5s;
}
.is-in .quote mark { background-size: 100% .42em; }

.quote figcaption {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 30px;
  font-size: 14px;
}
.quote figcaption strong { font-weight: 700; }
.quote figcaption span { opacity: .6; }

@media (max-width: 1000px) {
  .ads-shifts, .ads-quote { grid-template-columns: 1fr; }
  .shifts-intro { gap: 16px; }
}

/* Phones: the flight path becomes a dashed line down the left */
@media (max-width: 760px) {
  .shifts-grid { grid-template-columns: 1fr; }
  .shift { min-height: 0; }
  .shift-photo { min-height: 240px; }
  .flight-path, .flight-carpet { display: none; }
  .flight { padding-top: 8px; }
  .flight-steps { grid-template-columns: 1fr; gap: 22px; border-left: 1.6px dashed var(--navy); margin-left: 22px; }
  .flight-steps li { --rise: 0px; display: flex; gap: 16px; align-items: center; margin-left: -23px; }
  .flight-node { flex: none; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .flight-steps li { opacity: 1; transform: none; transition: none; }
  .js .flight-path { clip-path: none; transition: none; }
  .flight-carpet { opacity: 1; transform: none; transition: none; }
  .quote-mark path { stroke-dashoffset: 0; transition: none; }
  .quote mark { background-size: 100% .42em; transition: none; }
}