/* TRRB V31.9: compact footer CTA strip matching reference layout */

.sections-grid .section-lead img {
  object-fit: cover;
  object-position: center 18%;
  aspect-ratio: 16 / 9;
}

/* Desktop: one compact horizontal strip */
.cta-row {
  display: grid !important;
  grid-template-columns: 1.08fr 1fr 1fr !important;
  align-items: stretch !important;
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 28px auto 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .045) !important;
  overflow: hidden !important;
}

.cta-row > article {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: center !important;
  min-width: 0 !important;
  min-height: 142px !important;
  height: 142px !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  border: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.cta-row > article:last-child {
  border-right: 0 !important;
}

.cta-row > article::before {
  display: none !important;
}

.cta-row > article > h2 {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.cta-row > article > p {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
}

/* Subscription form remains inline and compact */
#daily form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

#daily form input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #d9dee5 !important;
  border-radius: 4px 0 0 4px !important;
  font-size: 13px !important;
}

#daily form button {
  width: 104px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 0 4px 4px 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#daily .form-note {
  display: none !important;
}

/* Reader group: copy left, small QR on the right */
#community {
  grid-template-columns: minmax(0, 1fr) 92px !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  text-align: left !important;
}

#community > h2,
#community > p {
  grid-column: 1 !important;
}

.reader-qr {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  display: block !important;
  width: 88px !important;
  height: 112px !important;
  max-width: 88px !important;
  max-height: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  box-shadow: none !important;
}

/* Submission: compact button only; full form remains in DOM for Netlify but hidden here */
#submit {
  grid-template-columns: minmax(0, 1fr) 112px !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
}

#submit > h2,
#submit > p {
  grid-column: 1 !important;
}

#submit .tip-form {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  display: block !important;
  width: 112px !important;
  margin: 0 !important;
}

#submit .tip-form > input:not([type="hidden"]),
#submit .tip-form > textarea,
#submit .tip-form > label,
#submit .tip-form > p {
  display: none !important;
}

#submit .tip-form button {
  display: block !important;
  width: 112px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #e34848 !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #d60000 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#submit .form-note {
  display: none !important;
}

/* Keep footer tight to the CTA strip */
.footer {
  margin-top: 14px !important;
}

@media (max-width: 900px) {
  .cta-row {
    grid-template-columns: 1fr !important;
    width: min(720px, calc(100% - 24px)) !important;
    margin-top: 22px !important;
    border-radius: 10px !important;
  }

  .cta-row > article {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .cta-row > article:last-child {
    border-bottom: 0 !important;
  }

  .cta-row > article > h2 {
    font-size: 21px !important;
  }

  .cta-row > article > p {
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
  }

  #community {
    grid-template-columns: minmax(0, 1fr) 86px !important;
    min-height: 126px !important;
  }

  .reader-qr {
    width: 78px !important;
    height: 100px !important;
    max-width: 78px !important;
    max-height: 100px !important;
  }

  #submit {
    grid-template-columns: minmax(0, 1fr) 108px !important;
    min-height: 112px !important;
  }

  #submit .tip-form,
  #submit .tip-form button {
    width: 108px !important;
  }
}

@media (max-width: 520px) {
  .cta-row {
    width: calc(100% - 20px) !important;
    margin-top: 18px !important;
  }

  .cta-row > article {
    padding: 16px !important;
  }

  #daily form {
    grid-template-columns: minmax(0, 1fr) 96px !important;
  }

  #daily form button {
    width: 96px !important;
    font-size: 13px !important;
  }

  #community {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    column-gap: 12px !important;
  }

  .reader-qr {
    width: 70px !important;
    height: 90px !important;
    max-width: 70px !important;
    max-height: 90px !important;
  }

  #submit {
    grid-template-columns: minmax(0, 1fr) 102px !important;
    column-gap: 12px !important;
  }

  #submit .tip-form,
  #submit .tip-form button {
    width: 102px !important;
  }
}