/* 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;
  }
}

/* 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;
  }
}

/* 5. proof_carousel — the full-bleed strip of past boards & meetings, as a
   drag slider: native horizontal scroll (drag with a mouse, swipe on touch)
   plus an auto-advance from MARQUEE_SCRIPT. The track holds `data-copies`
   identical copies; the script wraps scrollLeft by one copy width, so the loop
   is seamless both ways. Each cell is 2× the original height, 3× the width. */
.ds-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.ds-marquee::-webkit-scrollbar { display: none; }
.ds-marquee.is-dragging { cursor: grabbing; }
.ds-marquee-track { display: flex; width: max-content; }
.ds-marquee-item {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 50vh;
  width: calc(25vh * 9 / 16 * 3);
}

/* 6. hero_segment opt-ins (CMS `headlineSize` / `fullWidth`): the DS component
   caps its headline at 20ch and h2. A long statement headline can lift the cap
   and step down one heading size, without editing the component. */
.ds-hero_segment.hs-full h2 { max-width: none !important; }
.ds-hero_segment.hs-h1 h2 { font-size: var(--t-h1) !important; }
.ds-hero_segment.hs-h3 h2 { font-size: var(--t-h3) !important; }
.ds-hero_segment.hs-h4 h2 { font-size: var(--t-h4) !important; }

/* 7. gotomarket page rhythm: every section the same top/bottom padding
   (--s-9), so the gaps between sections are even. Desktop only — the mobile
   rule at the top of this file already normalises them. The DS hero_statement
   ships a larger opener (160/120); this overrides it here. */
@media screen and (min-width: 768px) {
  [data-theme="gotomarket"] .ds-hero_statement > section,
  [data-theme="gotomarket"] .ds-hero_segment > section,
  [data-theme="gotomarket"] .ds-sprint_rail > section,
  [data-theme="gotomarket"] .ds-proof_carousel > section,
  [data-theme="gotomarket"] .ds-cta_band > section {
    padding-top: var(--s-9) !important;
    padding-bottom: var(--s-9) !important;
  }
  /* sprint rail: equal-width segments (the DS sizes them by `weeks`). */
  [data-theme="gotomarket"] .ds-sprint_rail .sr-rail > button {
    flex: 1 1 0 !important;
  }
}

/* 8. The Swash mark's ground. The DS atom fills the mark with a background and
   gives it a 247x70 min box; with the display font's tight line-height, a
   wrapped mark paints over the line above (and inflates the line on phones).
   The DS's own fix is a 1em-tall background IMAGE, not a fill — apply it here
   (scoped to gotomarket) until the bundle carries it. A z-index is not the
   lever: the overlap is the mark's box, not stacking order. */
[data-theme="gotomarket"] mark[data-swash] {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: 0 .08em !important;
  background: none !important;
  background-image: linear-gradient(var(--mark-ground, #6f6), var(--mark-ground, #6f6)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1em !important;
  background-position: 0 50% !important;
  color: var(--on-mark, var(--ink, #241c15)) !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* 9. Mobile: the sprint rail is a tabbed selector, which is poor on a phone.
   SPRINT_RAIL_SCRIPT builds a stacked view (.sr-stack) with every sprint open
   and the pricing aside cloned in after the mandatory two; here we swap the
   tabbed view for it. Built on every viewport, shown only at mobile width. */
.sr-stack { display: none; }
@media screen and (max-width: 767px) {
  /* the rail headline sits at the clamp's floor (25px) on a phone and wraps
     awkwardly; step it up a little and let it use the full width. */
  .ds-sprint_rail h2 {
    font-size: clamp(28px, 7vw, 34px) !important;
    max-width: none !important;
  }
  .ds-sprint_rail .sr-rail,
  .ds-sprint_rail .sr-body { display: none !important; }
  .ds-sprint_rail .sr-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-9);
    margin-top: var(--s-6);
  }
  .ds-sprint_rail .sr-stack-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }
  /* each stacked sprint is marked by a full-width ink card carrying its name
     (the same ink ground as the active rail segment) */
  .ds-sprint_rail .sr-stack-item > div:first-child {
    background: var(--ink) !important;
    color: var(--text-inverse) !important;
    padding: var(--s-4) var(--s-5) !important;
    margin-bottom: 0 !important;
  }
  /* the DS moves the aside to the top below 991px; in the stack it stays put */
  .ds-sprint_rail .sr-stack .sr-aside { order: 0 !important; }
}