/* AEKE .sg — product-page sections: breadcrumbs, video, feature cards, FAQ.
 *
 * The buy block has its own file (`product-main.css`); these are the four section types the
 * product template shares with nothing else, measured on aeke.com's S1 Pro page and ported from
 * the theme's own class names.
 *
 * MEASURED:
 *
 *   breadcrumbs        49px tall = 15 + a 19.2px line box + 15; links are 12px in --color-body,
 *                      separated by an italic "/" with `margin: 0 8px`
 *   video              885px tall inside a 1325px column — the clip at its own ratio
 *   features header    1260x58; cards 353x400 with a 353x281 image
 *   feature title      ~26px line box
 *   FAQ title          42px line box
 *   FAQ row            56px closed, 55px summary
 */

/* ------------------------------------------------------------------ breadcrumbs */

.breadcrumbs {
  max-width: var(--grid-width-row);
  margin-right: auto;
  margin-left: auto;
  padding: 15px 15px;
}

@media (min-width: 48em) {
  .breadcrumbs {
    padding-right: 50px;
    padding-left: 50px;
  }
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  font-size: 12px;
  line-height: 19.2px;
}

/* The separator belongs to the item that follows it and is drawn by the stylesheet, so the
 * template stays a plain list of links. It is also implicit to assistive technology: generated
 * content is not in the accessibility tree, so a screen reader reads the trail, not the slashes. */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin: 0 8px;
  font-style: italic;
  color: var(--color-body);
}

.breadcrumbs__item a,
.breadcrumbs__item span {
  color: var(--color-body);
  text-decoration: none;
}

.breadcrumbs__item a:hover {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------------ video */

/* The video and FAQ wrappers exist to hold their child's own bottom margin inside their box.
 * The theme's `section-spacing` is a margin on the inner element, and a margin shrinks out of a
 * wrapper that does not establish a block formatting context — which made the B1's 815px video
 * section measure 745 and its 309px FAQ measure 239. `flow-root` is the same fix the multicolumn
 * row and the K1's toggle boxes needed, and it is why those two now match live to the pixel. */
.video-section-block,
.collapsible-content-section {
  display: flow-root;
}

.video-section {
  max-width: var(--grid-width-row);
  margin-right: auto;
  margin-left: auto;
  padding: 0 15px;
}

@media (min-width: 48em) {
  .video-section {
    padding: 0 50px;
  }
}

.video-section--inner video {
  display: block;
  width: 100%;
  /* All three video sections on aeke.com's S1 Pro page measure exactly 885px — identical for
     three clips that are not identical shapes. So the box is fixed, not derived from the
     media: 1325px at 16:9 is 745, and 885 is that plus the section's own 70px each way.
     Left to the clip's own ratio these came out 743 / 714 / 828, i.e. three different bands. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--block-border-radius);
}

/* -------------------------------------------------------------- feature cards */

.product-features {
  max-width: var(--grid-width-row);
  margin-right: auto;
  margin-left: auto;
  padding: 0 15px;
}

@media (min-width: 48em) {
  .product-features {
    padding: 0 50px;
  }
}

.product-features__header {
  max-width: 1260px;
  margin: 0 auto 30px;
}

.product-features__title {
  margin: 0 0 12px;
}

.product-features__subtitle {
  max-width: 610px;
  margin: 0;
  color: var(--color-body);
}

.product-features__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .product-features__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.product-feature__image {
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: var(--block-border-radius);
}

.product-feature__image img {
  display: block;
  width: 100%;
  height: auto;
}

.product-feature__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.product-feature__description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-body);
}

/* --- the `steps` layout -----------------------------------------------------------------
 * The K1's three-step row, measured at 1440: a 1300px container with `padding: 60px 20px`, a
 * two-column header (title 36/700, copy 18/400, `gap: 40px`, 60px under it), then three
 * 373x77 text steps with a 70px gap. Upstream puts a picture in each step and collapses it to
 * 0x0 with its own CSS, so only the words show.
 *
 * The outer padding is 60px, not the 70px `section-spacing` token: measured, and the reason the
 * template drops the spacing class for this layout rather than doubling it up. */
.product-features--steps {
  max-width: 1300px;
  margin: 0 auto;
  padding: 60px 20px;
}

.product-features--steps .product-features__header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
  max-width: none;
  margin: 0 0 60px;
}

.product-features--steps .product-features__title {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  text-align: left;
}

.product-features--steps .product-features__subtitle {
  max-width: none;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

.product-features__list--steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 70px;
}

.product-feature--step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 18px;
  text-align: center;
}

.product-feature--step .product-feature__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
}

.product-feature--step .product-feature__description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-step-text);
}

@media (max-width: 47.99em) {
  /* The header stops being two columns — side by side at 375 would leave each one 150px. */
  .product-features--steps .product-features__header {
    display: block;
    gap: 0;
    margin-bottom: 30px;
  }

  .product-features--steps .product-features__title {
    margin-bottom: 12px;
  }
}

/* The row scrolls sideways below 768 rather than stacking three full-width cards, which is the
   same treatment the gallery, the workout strip and the logo list already use. */
@media (max-width: 47.99em) {
  .product-features__list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(72%, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-features__list::-webkit-scrollbar {
    display: none;
  }

  .product-feature {
    scroll-snap-align: start;
  }
}

/* -------------------------------------------------------------------------- FAQ */

.collapsible-content {
  max-width: var(--grid-width-row);
  margin-right: auto;
  margin-left: auto;
  padding: 0 15px;
}

@media (min-width: 48em) {
  .collapsible-content {
    padding: 0 50px;
  }
}

.collapsible-content__header {
  /* Measured per section: 25px after the heading on the product pages, 44px on `/pages/faq`. */
  margin-bottom: var(--collapsible-header-gap, 25px);
}

.collapsible-content__title {
  margin: 0;
}

.collapsible-row {
  border-bottom: 1px solid var(--color-border);
}

.collapsible-row:first-of-type {
  border-top: 1px solid var(--color-border);
  /* Measured: the first row carries a 25px bottom margin of its own on the B1, which is part of
     the section's 239px of content. */
  margin-bottom: 25px;
}

.collapsible-row__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}

.collapsible-row__summary::-webkit-details-marker {
  display: none;
}

.collapsible-row__summary::marker {
  content: "";
}

.collapsible-row__marker {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-accent);
  transition: transform var(--duration-theme) var(--ease-theme);
}

.collapsible-row__marker svg {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------- the `.no-grid` variant

   The theme's own accordion CSS, for the layout `/pages/faq` uses — five of its eight sections. It
   is a different arrangement from the product pages' FAQ blocks, and the theme says so itself:

     borders        on the `.accordion` wrapper (1px top and bottom), not on each row
     summary        15px on a line-height of 1, `padding: 20px 40px 20px 0`
     answer         `padding: 0 0 15px`, 15px copy on a 24px line with 20px between paragraphs
     marker         a 14px chevron in a 14x20 box, `rotateX(180deg)` closed and `rotateX(0)` open

   Both sets of numbers are live measurements; this block is the FAQ page's. */

.collapsible-content--stacked .collapsible-row {
  /* Measured: a 0.8px hairline *under each row* — 19 rows of 55px plus 18 borders is the FAQ's
     1059.4px block, and the last row has none. The wrapper carries no border of its own. */
  border-bottom: 0.8px solid var(--color-border);
}

.collapsible-content--stacked .collapsible-row:first-of-type {
  border-top: 0;
  margin-bottom: 0;
}

.collapsible-content--stacked .collapsible-row:last-of-type {
  border-bottom: 0;
}

.collapsible-content--stacked .collapsible-row__summary {
  position: relative;
  padding: 20px 40px 20px 0;
  font-size: 0.9375rem;
  line-height: 1;
}

.collapsible-content--stacked .collapsible-row__marker {
  /* The theme positions the marker rather than flowing it, and that is what keeps the row at 55px:
     in flow its 20px box is taller than the 15px question, and every row grows by 5. */
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 20px;
  margin-top: -10px;
  color: var(--color-heading);
}

.collapsible-content--stacked .collapsible-row__marker svg {
  width: 14px;
  height: 8px;
  transform: rotateX(180deg);
  transition: transform 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}

/* The chevron flips; the plus above rotates a quarter turn. Cancel the second for this variant. */
.collapsible-content--stacked .collapsible-row[open] .collapsible-row__marker {
  transform: none;
}

.collapsible-content--stacked .collapsible-row[open] .collapsible-row__marker svg {
  transform: rotateX(0);
}

.collapsible-content--stacked .collapsible-row__answer {
  padding: 0 0 15px;
  font-size: 0.9375rem;
}

.collapsible-content--stacked .collapsible-row__answer p {
  font-size: inherit;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* A plus that becomes a minus: the vertical bar rotates out of view. */
.collapsible-row[open] .collapsible-row__marker {
  transform: rotate(135deg);
}

.collapsible-row__answer {
  padding: 0 40px 20px 0;
  color: var(--color-body);
}

.collapsible-row__answer > *:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-row__marker {
    transition: none;
  }
}