/* ======================================================
   SEC2 — About / McLuhan layout
   Typography comes from typography.css (typo-*)
====================================================== */

.sec2{
  background: #ffffff;
  color: #000000;
}

/* Keep same geometry as master */
.sec2 .content{
  width: min(1200px, 94vw);
  margin: 0 auto;
  padding: 0 0 84px;
}

/* Grid */
.sec2-grid{
  display: grid;
  gap: 44px;
  align-items: stretch;
}

/* Desktop: image column + content column */
@media (min-width: 980px){
  .sec2-grid{
    grid-template-columns: 420px minmax(0, 1fr);
    grid-template-areas:
      "visual text";
  }

  .sec2-zone--visual{ grid-area: visual; }
  .sec2-zone--text{ grid-area: text; }
}

/* Mobile: stack */
@media (max-width: 979px){
  .sec2-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "visual"
      "text"
      "cta";
  }

  .sec2-zone--visual{ grid-area: visual; }
  .sec2-zone--headline{ grid-area: headline; }
  .sec2-zone--text{ grid-area: text; }
  .sec2-zone--cta{ grid-area: cta; }
}

/* Visual image */
.sec2-visual-img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
  object-fit: cover;
}

/* Make visual and text columns match height */
@media (min-width: 980px){
  .sec2-zone--visual,
  .sec2-zone--text{
    height: 100%;
  }

  .sec2-zone--text{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
  }
}

/* Tighten repeated typo-body blocks inside sec2 text */
.sec2 .sec2-zone--text .typo-body{
  margin-bottom: 18px; /* slightly tighter than default 28px */
}
.sec2 .sec2-zone--text .typo-body:last-child{
  margin-bottom: 0;
}

/* Make rotating line behave nicely */
.sec2 .typo-sub .fade{
  display: inline-block;
}

/* CTA spacing like Strip Lab */
.sec2 .button-row{
  margin-top: 0;
}

.sec2 .sec2-zone--text{
  margin-top: 0;
}