/* Responsive layer for the cleberalex design system.
   The DS components use INLINE styles, which cannot hold @media queries, so the
   responsive behaviour lives here — keyed on the .ds-<component> wrapper the SSR
   harness emits around each section. All values are the DS tokens. Loaded after
   /ds/styles.css, so these rules win (with !important over the inline styles). */

/* 1. Section padding. The components set var(--s-11) (160px) at every width;
   nothing reduces it, so heroes/sections are 160px tall on a phone. */
@media (max-width: 767px) {
  .g-calm, .g-calm-alt, .g-quiet, .g-bright, .g-dark, .g-anchor {
    padding-top: var(--s-9) !important;
    padding-bottom: var(--s-9) !important;
  }
}

/* 2. Fixed multi-column grids collapse to one column. (Grids declared
   repeat(auto-fit, minmax(Npx,1fr)) already collapse and are left alone.) */
@media (max-width: 767px) {
  .ds-hero_offer [style*="grid-template-columns"],
  .ds-offer_tiers [style*="grid-template-columns"],
  .ds-explain_timeline [style*="grid-template-columns"],
  .ds-explain_matrix [style*="grid-template-columns"],
  .ds-cms_box_small [style*="grid-template-columns"],
  .ds-proof_logos [style*="grid-template-columns"],
  .ds-cms_row [style*="grid-template-columns"],
  .ds-contact_split [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* numbered stack keeps a smaller number gutter */
  .ds-explain_stack_numbered [style*="grid-template-columns"] {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }
  /* FAQ keeps its +/− marker column */
  .ds-faq_fullwidth [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) 28px !important;
  }
  /* profile split: photo above prose on a phone */
  .ds-profile_split [data-split] {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Header bar: let it wrap instead of crowding the brand/nav/CTA. */
@media (max-width: 767px) {
  header [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    row-gap: var(--s-3) !important;
  }
}

/* 4. Footer: four fixed columns -> two, then one. */
@media (max-width: 991px) {
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* 5. Aquaponia header: keep the nav links and the CTA grouped on the right.
   The DS header is a space-between row (brand | nav | cta); flex-start plus a
   margin-left:auto on the nav pushes nav+cta together against the right edge.
   Desktop only — the mobile rule above lets the row wrap. */
@media (min-width: 768px) {
  [data-theme="cursodeaquaponia"] header [style*="justify-content:space-between"] {
    justify-content: flex-start !important;
  }
  [data-theme="cursodeaquaponia"] header [style*="justify-content:space-between"] > nav {
    margin-left: auto !important;
  }
}

/* 6. Aquaponia article hero: the Ground ships padding-bottom 0, so the tagline
   sits flush against the body. Give the hero a bottom margin. */
[data-theme="cursodeaquaponia"] .ds-head_internal > section {
  padding-bottom: var(--s-7) !important;
}

/* 7. Article blockquote. The DS ships no in-body quote component, so a raw
   <blockquote> fell back to the browser default and read as a paragraph. Style
   it as a token card: Playfair italic on a card ground with a coloured rule. */
.article-body blockquote {
  margin: 0 0 var(--blog-block-gap);
  padding: var(--s-5) var(--s-6);
  background: var(--surface-card);
  border: var(--bw-hair) solid var(--border-hair);
  border-left: 4px solid var(--accent-secondary);
  border-radius: var(--r-md);
  font-family: var(--font-blog-display);
  font-style: italic;
  font-size: var(--blog-h4);
  line-height: 1.35;
  text-wrap: pretty;
}
.article-body blockquote p { margin: 0; }
.article-body blockquote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-blog-body);
  font-style: normal;
  font-size: var(--t-small);
  color: var(--text-muted);
}
@media (max-width: 479px) {
  .article-body blockquote { padding: var(--s-4) var(--s-5); font-size: var(--blog-h5); }
}

/* 8. Article figures. WP galleries arrived as <ul><li><figure> (bullets); the
   importer unwraps them. Each figure spans the wide measure — a normal
   full-width image with a muted caption underneath. */
.article-body figure {
  margin: 0 0 var(--blog-block-gap);
  width: min(var(--measure-wide), 88vw);
  margin-left: calc(50% - min(var(--measure-wide), 88vw) / 2);
}
.article-body figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
}
.article-body figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-blog-body);
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
  color: var(--text-muted);
  text-align: center;
  text-wrap: pretty;
}
/* embedded video: the figure holds a 16:9 box */
.article-body figure.embed { aspect-ratio: 16 / 9; }
.article-body figure.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: var(--r-md);
}

/* 9. Mobile nav — a hamburger. The DS header has no toggle, so the SSR harness
   injects one (see render.cjs) and this styles it: the nav collapses into a
   dropdown, the CTA stays visible. Hidden by default so it is a no-op on sites
   that have not opted in. */
.nav-toggle { display: none; }

@media (max-width: 767px) {
  [data-theme="cursodeaquaponia"] header { position: relative; }
  [data-theme="cursodeaquaponia"] header nav { display: none !important; }
  [data-theme="cursodeaquaponia"] header nav.is-open {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--ground-calm);
    color: var(--on-calm);
    border-top: var(--bw-hair) solid var(--border-hair);
    border-bottom: var(--bw-hair) solid var(--border-hair);
    padding: var(--s-5) var(--gutter);
    z-index: 60;
  }
  [data-theme="cursodeaquaponia"] header .nav-cta { margin-left: auto !important; }
  [data-theme="cursodeaquaponia"] header .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: var(--s-3);
    padding: 0;
    border: var(--bw-hair) solid var(--border-hair);
    border-radius: var(--r-md);
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
}