/* October 2026 mobile layout pass. Phone widths only; desktop and tablet layouts are unchanged. */

/* All widths: the coach photo is now wrapped in <picture>; keep the rendering the bare <img> had. */
.ag-coach-chat-visual > picture { display: block; }
.ag-coach-chat-visual > picture > img { display: block; width: 100%; height: auto; }

/* Coach chat visual: a phone-free crop of the photo, with the chat card overlapping its lower edge instead of covering Alex. */
@media (max-width: 767.98px) {
  .ag-coach-chat-visual { display: flex; flex-direction: column; max-width: 420px; padding-bottom: 0; }
  .ag-coach-chat-visual > picture { position: relative; z-index: 1; display: block; width: 100%; }
  .ag-coach-chat-visual > picture > img { display: block; width: 100%; height: auto; }
  .ag-chat { position: relative; left: auto; top: auto; width: 88%; height: auto; min-height: 0; margin: -24% 0 0 auto; border-radius: 18px; font-size: 13.5px; }
  .ag-chat-header { gap: 9px; padding: 10px 12px; }
  .ag-chat-header > img { width: 36px; height: 36px; }
  .ag-chat-messages { flex: none; justify-content: flex-start; gap: 8px; padding: 12px; }
  .ag-chat-message { padding: 9px 12px; border-radius: 14px 14px 14px 4px; }
  .ag-chat-reply { margin-left: 22px; border-radius: 14px 14px 4px 14px; }
}

/* Decorative photos: cap their height so they stop pushing the content below them a full screen down. */
@media (max-width: 767.98px) {
  img[src$="img-thumbnail-faq.jpg"] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; }
  img[src$="img-inside-coaching.jpg"] { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; }
}

@media (max-width: 575.98px) {
  /* Feature circles become red cards, so the copy is no longer squeezed into a circle. */
  .card-circle { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 4px 14px; width: 100%; height: auto; aspect-ratio: auto; margin: 0; padding: 18px 20px; border-radius: 22px; text-align: left; }
  .card-circle > div:first-child { grid-row: span 2; align-self: start; }
  .card-circle img { width: 48px; height: 48px; margin: 0; }
  .card-circle h6 { font-size: 18px; }
  .card-circle p { font-size: 14px; line-height: 1.45; }

  /* Results and example meals: two per row instead of one. */
  .sec-help-you > .col-sm-6, .sec-em > .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .sec-help-you .ul-text-kg { bottom: 6px; padding: .2rem .55rem; }
  .sec-help-you .ul-text-kg li { font-size: 12px; white-space: nowrap; }
  .sec-em .card-em-wrap { max-width: none; }
  .sec-em h6 { bottom: 10px; padding: 0 .5rem; font-size: 16px; line-height: 1.2; }

  /* Coach grid: two per row; an opened biography spans the full row so it stays readable. */
  .ag-coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; justify-content: stretch; gap: .75rem; }
  .ag-coach-toggle { padding: 2.25rem .4rem .85rem; }
  .ag-coach-name { font-size: 14px; }
  .ag-coach-prompt { font-size: 10.5px; }
  .ag-coach-card.is-open { grid-column: 1 / -1; aspect-ratio: auto; min-height: 220px; }
  .ag-coach-card.is-open > img { display: none; }
  .ag-coach-card.is-open .ag-coach-bio { position: relative; inset: auto; overflow: visible; }
  .ag-coach-card.is-open .ag-coach-prompt { font-size: 13px; }
  .ag-coach-bio { padding: 1.4rem 1.4rem 4.75rem; }
  .ag-client-cap { margin-top: 1.25rem; }
}