/* ─────────────────────────────────────────────
 * bp-s.css — Breakpoint S structural rules
 *
 * Loaded via wp_enqueue_style with:
 *   media="(min-width: Xrem)"
 * where X = frct_get_breakpoints()['s'] — default 30rem (480px).
 *
 * DO NOT write @media rules inside this file.
 * The <link media=""> attribute IS the media query.
 * ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
 * SECTION GRID
 * ───────────────────────────────────────────── */
.sec.bp-s.cols-2 .sec-inner {grid-template-columns: repeat(2, 1fr);}
.sec.bp-s.cols-3 .sec-inner {grid-template-columns: repeat(3, 1fr);}
.sec.bp-s.cols-4 .sec-inner {grid-template-columns: repeat(4, 1fr);}
.sec.bp-s.cols-5 .sec-inner {grid-template-columns: repeat(5, 1fr);}
.sec.bp-s.cols-6 .sec-inner {grid-template-columns: repeat(6, 1fr);}
.sec.bp-s.cols-7 .sec-inner {grid-template-columns: repeat(7, 1fr);}
.sec.bp-s.cols-8 .sec-inner {grid-template-columns: repeat(8, 1fr);}
.sec.bp-s .mod.span-2 {grid-column: span 2;}
.sec.bp-s .mod.span-3 {grid-column: span 3;}
.sec.bp-s .mod.span-4 {grid-column: span 4;}
.sec.bp-s .mod.span-5 {grid-column: span 5;}
.sec.bp-s .mod.span-6 {grid-column: span 6;}
.sec.bp-s .mod.span-7 {grid-column: span 7;}
.sec.bp-s .mod.span-8 {grid-column: span 8;}
.sec.bp-s .mod.span-full {grid-column: 1 / -1;}

/* Intermediate columns (section "Mid cols." starting at this breakpoint). :where() keeps the specificity below the
 * main grid rules above, so from the section's own Threshold up those always win. */
.sec:where(.midbp-s.mid-2) .sec-inner {grid-template-columns: repeat(2, 1fr);}
.sec:where(.midbp-s.mid-3) .sec-inner {grid-template-columns: repeat(3, 1fr);}
.sec:where(.midbp-s.mid-4) .sec-inner {grid-template-columns: repeat(4, 1fr);}
.sec:where(.midbp-s.mid-5) .sec-inner {grid-template-columns: repeat(5, 1fr);}
.sec:where(.midbp-s.mid-2) .mod.span-2 {grid-column: span 2;}
.sec:where(.midbp-s.mid-3) .mod.span-2 {grid-column: span 2;}
.sec:where(.midbp-s.mid-3) .mod.span-3 {grid-column: span 3;}
.sec:where(.midbp-s.mid-4) .mod.span-2 {grid-column: span 2;}
.sec:where(.midbp-s.mid-4) .mod.span-3 {grid-column: span 3;}
.sec:where(.midbp-s.mid-4) .mod.span-4 {grid-column: span 4;}
.sec:where(.midbp-s.mid-5) .mod.span-2 {grid-column: span 2;}
.sec:where(.midbp-s.mid-5) .mod.span-3 {grid-column: span 3;}
.sec:where(.midbp-s.mid-5) .mod.span-4 {grid-column: span 4;}
.sec:where(.midbp-s.mid-5) .mod.span-5 {grid-column: span 5;}
.sec:where(.midbp-s) .mod.span-full {grid-column: 1 / -1;}

/* ─────────────────────────────────────────────
 * SLIDER RESPONSIVE MEDIA SWAP
 * ───────────────────────────────────────────── */
.swiper-slide[data-slide-bp="s"] .slide-media-primary  { display: none; }
.swiper-slide[data-slide-bp="s"] .slide-media-secondary { display: block; }

/* ─────────────────────────────────────────────
 * VISIBILITY
 * ───────────────────────────────────────────── */
.sec.hide-above-s,
.mod.hide-above-s {display: none;}

/* ─────────────────────────────────────────────
 * BADGE
 * ───────────────────────────────────────────── */

/* Layout — desktop */
.mod-badge.bp-layout-s.layout-desk-img-top    { flex-direction: column;         }
.mod-badge.bp-layout-s.layout-desk-img-bottom { flex-direction: column-reverse; }
.mod-badge.bp-layout-s.layout-desk-img-left   { flex-direction: row;            }
.mod-badge.bp-layout-s.layout-desk-img-right  { flex-direction: row-reverse;    }

/* Column H — desktop */
.mod-badge.bp-align-s.layout-img-top    .mod-badge__image.align-h-desk-left,
.mod-badge.bp-align-s.layout-img-bottom .mod-badge__image.align-h-desk-left,
.mod-badge.bp-align-s.layout-desk-img-top    .mod-badge__image.align-h-desk-left,
.mod-badge.bp-align-s.layout-desk-img-bottom .mod-badge__image.align-h-desk-left   { align-self: flex-start; }
.mod-badge.bp-align-s.layout-img-top    .mod-badge__image.align-h-desk-center,
.mod-badge.bp-align-s.layout-img-bottom .mod-badge__image.align-h-desk-center,
.mod-badge.bp-align-s.layout-desk-img-top    .mod-badge__image.align-h-desk-center,
.mod-badge.bp-align-s.layout-desk-img-bottom .mod-badge__image.align-h-desk-center { align-self: center;     }
.mod-badge.bp-align-s.layout-img-top    .mod-badge__image.align-h-desk-right,
.mod-badge.bp-align-s.layout-img-bottom .mod-badge__image.align-h-desk-right,
.mod-badge.bp-align-s.layout-desk-img-top    .mod-badge__image.align-h-desk-right,
.mod-badge.bp-align-s.layout-desk-img-bottom .mod-badge__image.align-h-desk-right  { align-self: flex-end;   }

/* Row H — desktop */
.mod-badge.bp-align-s.layout-img-left  .mod-badge__image.align-h-desk-left,
.mod-badge.bp-align-s.layout-img-right .mod-badge__image.align-h-desk-left,
.mod-badge.bp-align-s.layout-desk-img-left  .mod-badge__image.align-h-desk-left,
.mod-badge.bp-align-s.layout-desk-img-right .mod-badge__image.align-h-desk-left   { justify-content: flex-start; }
.mod-badge.bp-align-s.layout-img-left  .mod-badge__image.align-h-desk-center,
.mod-badge.bp-align-s.layout-img-right .mod-badge__image.align-h-desk-center,
.mod-badge.bp-align-s.layout-desk-img-left  .mod-badge__image.align-h-desk-center,
.mod-badge.bp-align-s.layout-desk-img-right .mod-badge__image.align-h-desk-center { justify-content: center;     }
.mod-badge.bp-align-s.layout-img-left  .mod-badge__image.align-h-desk-right,
.mod-badge.bp-align-s.layout-img-right .mod-badge__image.align-h-desk-right,
.mod-badge.bp-align-s.layout-desk-img-left  .mod-badge__image.align-h-desk-right,
.mod-badge.bp-align-s.layout-desk-img-right .mod-badge__image.align-h-desk-right  { justify-content: flex-end;   }

/* Column V — desktop */
.mod-badge.bp-align-s.layout-img-top    .mod-badge__image.align-v-desk-top,
.mod-badge.bp-align-s.layout-img-bottom .mod-badge__image.align-v-desk-top,
.mod-badge.bp-align-s.layout-desk-img-top    .mod-badge__image.align-v-desk-top,
.mod-badge.bp-align-s.layout-desk-img-bottom .mod-badge__image.align-v-desk-top    { align-items: flex-start; }
.mod-badge.bp-align-s.layout-img-top    .mod-badge__image.align-v-desk-middle,
.mod-badge.bp-align-s.layout-img-bottom .mod-badge__image.align-v-desk-middle,
.mod-badge.bp-align-s.layout-desk-img-top    .mod-badge__image.align-v-desk-middle,
.mod-badge.bp-align-s.layout-desk-img-bottom .mod-badge__image.align-v-desk-middle { align-items: center;     }
.mod-badge.bp-align-s.layout-img-top    .mod-badge__image.align-v-desk-bottom,
.mod-badge.bp-align-s.layout-img-bottom .mod-badge__image.align-v-desk-bottom,
.mod-badge.bp-align-s.layout-desk-img-top    .mod-badge__image.align-v-desk-bottom,
.mod-badge.bp-align-s.layout-desk-img-bottom .mod-badge__image.align-v-desk-bottom { align-items: flex-end;   }

/* Row V — desktop */
.mod-badge.bp-align-s.layout-img-left  .mod-badge__image.align-v-desk-top,
.mod-badge.bp-align-s.layout-img-right .mod-badge__image.align-v-desk-top,
.mod-badge.bp-align-s.layout-desk-img-left  .mod-badge__image.align-v-desk-top,
.mod-badge.bp-align-s.layout-desk-img-right .mod-badge__image.align-v-desk-top    { align-self: flex-start; }
.mod-badge.bp-align-s.layout-img-left  .mod-badge__image.align-v-desk-middle,
.mod-badge.bp-align-s.layout-img-right .mod-badge__image.align-v-desk-middle,
.mod-badge.bp-align-s.layout-desk-img-left  .mod-badge__image.align-v-desk-middle,
.mod-badge.bp-align-s.layout-desk-img-right .mod-badge__image.align-v-desk-middle { align-self: center;     }
.mod-badge.bp-align-s.layout-img-left  .mod-badge__image.align-v-desk-bottom,
.mod-badge.bp-align-s.layout-img-right .mod-badge__image.align-v-desk-bottom,
.mod-badge.bp-align-s.layout-desk-img-left  .mod-badge__image.align-v-desk-bottom,
.mod-badge.bp-align-s.layout-desk-img-right .mod-badge__image.align-v-desk-bottom { align-self: flex-end;   }

/* Text alignment — desktop */
.mod-badge.bp-text-s .mod-badge__heading.text-align-desk-left,
.mod-badge.bp-text-s .mod-badge__text.text-align-desk-left   { text-align: left;   }
.mod-badge.bp-text-s .mod-badge__heading.text-align-desk-center,
.mod-badge.bp-text-s .mod-badge__text.text-align-desk-center { text-align: center; }
.mod-badge.bp-text-s .mod-badge__heading.text-align-desk-right,
.mod-badge.bp-text-s .mod-badge__text.text-align-desk-right  { text-align: right;  }

/* ─────────────────────────────────────────────
 * HTML MODULE — text + vertical alignment desktop
 * ───────────────────────────────────────────── */
.ta-bp-s.ta-desk-l { text-align: left;   }
.ta-bp-s.ta-desk-c { text-align: center; }
.ta-bp-s.ta-desk-r { text-align: right;  }
.va-bp-s.va-desk-t { margin-block: 0; }
.va-bp-s.va-desk-m { margin-block: auto; }
.va-bp-s.va-desk-b { margin-block-start: auto; margin-block-end: 0; }
/* ─────────────────────────────────────────────
 * GALLERY
 * ───────────────────────────────────────────── */
.mod-gallery__grid {
	grid-template-columns: repeat(var(--mod-gallery-cols-s, var(--mod-gallery-cols-base, 1)), 1fr);
}

/* ─────────────────────────────────────────────
 * BADGE — image cell 50% fallback for desktop row layouts
 * ───────────────────────────────────────────── */
.mod-badge.bp-layout-s.layout-desk-img-left  > .mod-badge__image,
.mod-badge.bp-layout-s.layout-desk-img-right > .mod-badge__image {
	flex-basis: var(--badge-img-basis, 50%);
}

/* ─────────────────────────────────────────────
 * TABS — desktop position overrides
 * ───────────────────────────────────────────── */

.bp-tabs-s.tabs-desk-top {flex-direction:column;gap:var(--mod-tabs-panel-padding);}
.bp-tabs-s.tabs-desk-top > .mod-tabs__nav {order:0;flex-direction:row;flex-wrap:wrap;border-bottom:var(--mod-tabs-indicator-width) solid currentColor;border-right:none;border-left:none;border-top:none;}
.bp-tabs-s.tabs-desk-top > .mod-tabs__nav .mod-tabs__btn {border-bottom:var(--mod-tabs-indicator-width) solid transparent;border-right:none;border-left:none;border-top:none;margin-bottom:calc(var(--mod-tabs-indicator-width) * -1);margin-right:0;margin-left:0;}
.bp-tabs-s.tabs-desk-top > .mod-tabs__panels {order:1;width:100%;flex:unset;padding:0;}

.bp-tabs-s.tabs-desk-bottom {flex-direction:column;gap:var(--mod-tabs-panel-padding);}
.bp-tabs-s.tabs-desk-bottom > .mod-tabs__nav {order:1;flex-direction:row;flex-wrap:wrap;border-top:var(--mod-tabs-indicator-width) solid currentColor;border-right:none;border-left:none;border-bottom:none;}
.bp-tabs-s.tabs-desk-bottom > .mod-tabs__nav .mod-tabs__btn {border-top:var(--mod-tabs-indicator-width) solid transparent;border-right:none;border-left:none;border-bottom:none;margin-top:calc(var(--mod-tabs-indicator-width) * -1);margin-right:0;margin-left:0;}
.bp-tabs-s.tabs-desk-bottom > .mod-tabs__panels {order:0;width:100%;flex:unset;padding:0;}

.bp-tabs-s.tabs-desk-left {flex-direction:row;align-items:flex-start;gap:var(--mod-tabs-panel-padding);}
.bp-tabs-s.tabs-desk-left > .mod-tabs__nav {order:0;flex-direction:column;flex:0 0 var(--tabs-nav-w, var(--mod-tabs-nav-w));border-right:var(--mod-tabs-indicator-width) solid currentColor;border-bottom:none;border-left:none;border-top:none;}
.bp-tabs-s.tabs-desk-left > .mod-tabs__nav .mod-tabs__btn {white-space:normal;border-right:var(--mod-tabs-indicator-width) solid transparent;border-bottom:none;border-left:none;border-top:none;margin-right:calc(var(--mod-tabs-indicator-width) * -1);margin-bottom:0;}
.bp-tabs-s.tabs-desk-left > .mod-tabs__panels {order:1;flex:1;min-width:0;width:auto;padding:0;}

.bp-tabs-s.tabs-desk-right {flex-direction:row;align-items:flex-start;gap:var(--mod-tabs-panel-padding);}
.bp-tabs-s.tabs-desk-right > .mod-tabs__nav {order:1;flex-direction:column;flex:0 0 var(--tabs-nav-w, var(--mod-tabs-nav-w));border-left:var(--mod-tabs-indicator-width) solid currentColor;border-bottom:none;border-right:none;border-top:none;}
.bp-tabs-s.tabs-desk-right > .mod-tabs__nav .mod-tabs__btn {white-space:normal;border-left:var(--mod-tabs-indicator-width) solid transparent;border-bottom:none;border-right:none;border-top:none;margin-left:calc(var(--mod-tabs-indicator-width) * -1);margin-bottom:0;}
.bp-tabs-s.tabs-desk-right > .mod-tabs__panels {order:0;flex:1;min-width:0;width:auto;padding:0;}

/* ─────────────────────────────────────────────
 * VIDEO — ratio switch at breakpoint S
 * ───────────────────────────────────────────── */
[data-video-bp="s"] .mod-video-local__wrapper {
	aspect-ratio: var(--video-ratio-d, var(--video-ratio-m));
}

[data-video-bp="s"] .mod-video-external__ratio {
	aspect-ratio: var(--video-ratio-d, var(--video-ratio-m));
}