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

/* 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 the social-card ratio (4:5). */
.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;
  /* 4:5 portrait — matches the social-card ratio (1080×1350), so the image
     is never cropped by object-fit: cover. Height is 10% above the original
     50vh. */
  height: 55vh;
  width: calc(55vh * 4 / 5);
}

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

/* 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. sprint_rail — linear layout (no tabs) on every width. The server renders
   each sprint in full with the price aside after the mandatory sprints, so no
   JS is needed to build the flow. */
.ds-sprint_rail .srl-cta:hover { background: var(--green-mid) !important; }
/* header: headline + sprint mini-index stack on tablet and below */
@media screen and (max-width: 991px) {
  .ds-sprint_rail .sr-header {
    grid-template-columns: 1fr !important;
    row-gap: var(--s-6) !important;
  }
}
@media screen and (max-width: 767px) {
  .ds-sprint_rail h2 {
    font-size: clamp(28px, 7vw, 34px) !important;
    max-width: none !important;
  }
  /* Actions / Deliverables collapse to one column on a phone */
  .ds-sprint_rail .srl-detail {
    grid-template-columns: 1fr !important;
  }
  /* mini-index: each sprint breaks to its own line after its arrow */
  .ds-sprint_rail .srl-mini-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* 10. feature_split — the image + feature-list grid collapses to one column on
   a phone (image above the list, in DOM order). */
@media (max-width: 767px) {
  .ds-feature_split [data-fs-grid] {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: var(--s-5) !important;
  }
}

/* 11. discovery_cta — the book-a-call pitch + pricing card stack on tablet and
   below (pitch above the card). */
@media (max-width: 991px) {
  .ds-discovery_cta [data-dcta-grid] {
    grid-template-columns: 1fr !important;
    row-gap: var(--s-8) !important;
  }
}

/* 12. note grid — the sticky author + CTA rail beside an article body (the
   SparkToro pattern). The grid cell stretches to the article's height, so the
   inner .note-rail-stick can travel the full length of the read and only pin
   once its top reaches --s-6 from the viewport. Desktop only; on smaller
   widths the two columns stack with the article first and the rail stops
   sticking (there is nothing to stick beside). */
.note-rail-stick {
  position: sticky;
  top: var(--s-6);
}
.note-rail-stick > * + * {
  margin-top: var(--s-5);
}
/* The note grid drops the article header (the title lives in head_internal and
   the byline became the rail), so the DS prose rule that used to separate the
   header from the body would leave an orphaned gap + hairline. Collapse it
   when the header renders empty. */
.ds-note_grid .note-prose:has(> div:first-child:empty) > div:last-child > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
@media (max-width: 991px) {
  .note-grid {
    grid-template-columns: 1fr !important;
    row-gap: var(--s-8) !important;
  }
  .note-article {
    order: -1;
  }
  .note-rail-stick {
    position: static;
  }
}

/* 13. Note heading typography. The reading surface's heading scale (owned by
   blog-readability.css) is sized for a wide desktop layout; on a phone the
   display face is too large and its 1.1 line-height too tight, so a long word
   like "dimensionamento" runs off-screen and multi-line titles crowd. Cap the
   size, loosen the line, and let long words break instead of overflowing. */
.ds-head_internal h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .ds-head_internal h1 {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.25 !important;
  }
  .article-body h2 {
    font-size: 26px !important;
    line-height: 1.22 !important;
  }
  .article-body h3 {
    font-size: 21px !important;
    line-height: 1.28 !important;
  }
  .article-body h4 {
    font-size: 18px !important;
    line-height: 1.33 !important;
  }
}