/*
 * 06 For agencies.
 *
 * A 5/7 split: the copy on the start side, a 2x2 hairline grid of cells on
 * the end side. The prototype expressed both breakpoints as container
 * queries against a wrapper this theme does not have, so they are media
 * queries at 1100px and 640px here.
 *
 * Nothing in this section animates on its own. The only motion is the shared
 * reveal, whose CSS, its prefers-reduced-motion block and its
 * [data-ad-motion="off"] switch all live in hero.css, so none of it is
 * redefined here. There is no ambient loop to stop, so SC 2.2.2 needs no
 * further work in this file.
 */

.ad-agencies {
  /* Zero top padding: the previous section's 140px bottom is the whole gap. */
  padding: 0 var(--ad-space-page) var(--ad-space-section);
}

/* ------------------------------------------------------------- 5/7 split */

.ad-agencies__split {
  display: grid;
  /* minmax with a zero minimum so a long unbroken word cannot blow a column out. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

/* ---------------------------------------------------------- copy column */

.ad-agencies__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.ad-agencies__eyebrow {
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

.ad-agencies__title {
  font-size: 56px;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: pretty;
}

.ad-agencies__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ad-color-text-secondary);
  text-wrap: pretty;
}

/*
 * align-self keeps the link box the width of its own text. As a stretched
 * item of the flex column it would be a click target full of empty space,
 * with a focus ring far wider than the visible link (SC 2.4.7).
 * min-height carries the 44px target (SC 2.5.8).
 */
.ad-agencies__cta {
  display: inline-flex;
  align-self: start;
  align-items: center;
  gap: 10px;
  min-height: var(--ad-size-hit);
  font-size: 15px;
  font-weight: 600;
  color: var(--ad-color-accent);
}

/*
 * The arrow is a flex item of the link, so it shrinks by default. At 320px
 * the Hebrew label plus the arrow fill the whole copy column and the glyph
 * squashes below 18px. The prototype guards this with an inline flex:none on
 * the svg, and team.css carries the same rule for the same link pattern.
 */
.ad-agencies__cta svg {
  flex: none;
}

/* ------------------------------------------------------ 2x2 hairline grid */

/*
 * The 1px lines are the parent's colour showing through a 1px gap and a 1px
 * border. Each cell paints its own opaque ground on top.
 */
.ad-agencies__cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ad-space-hairline);
  background: var(--ad-color-hairline);
  border: var(--ad-space-hairline) solid var(--ad-color-hairline);
  min-width: 0;
}

.ad-agencies__cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 36px;
  padding-inline: 32px;
  background: var(--ad-color-bg);
  min-width: 0;
}

/*
 * An odd number of cells would leave the last grid track empty, and the
 * parent's hairline colour would show through as a solid block instead of a
 * 1px line. Spanning the last cell keeps the frame intact whatever the
 * editor adds.
 */
.ad-agencies__cell:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.ad-agencies__icon {
  display: flex;
  color: var(--ad-color-accent);
}

/*
 * The span is a flex row, so the glyph would shrink once the row runs out of
 * space. The prototype sets flex:none inline on this svg; keep it here.
 */
.ad-agencies__icon svg {
  flex: none;
}

/* base.css already supplies margin 0 and line-height 1.1 for h3. */
.ad-agencies__cell-title {
  font-size: 20px;
  font-weight: 600;
}

.ad-agencies__cell-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ad-color-text-muted);
}

/* ------------------------------------------------------------ responsive */

/* The copy stacks above the cells, still separated by the 64px gap. The
   cell grid keeps its two columns here. */
@media (max-width: 1100px) {
  .ad-agencies__split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /*
   * .m-py in the prototype forces 72px top AND bottom on this section, so
   * mobile gains a top padding the desktop layout does not have. Reproduced
   * literally; the handoff records the resulting 144px gap between sections
   * as a prototype artefact for the client to confirm.
   */
  .ad-agencies {
    padding: var(--ad-space-section-mobile) var(--ad-space-page-mobile);
  }

  .ad-agencies__title {
    font-size: 34px;
  }

  /* The four cells become one column, each separated by a 1px hairline. */
  .ad-agencies__cells {
    grid-template-columns: 1fr;
  }
}