/* trc-rebuild-freetraining.css — page-scoped rebuild CSS for section-by-section native-Gutenberg rebuild.
 * Owned by rebuild agent for /free-training-swimming-technique-videos/ (page 95399).
 * Do not edit manually mid-rebuild.
 * Created 2026-08-05. */

/* ===========================================================================
 * S0 HERO — trc-ft-s0-* — LIVE-parity fixes
 *
 * LIVE anatomy (measured 2026-08-05 at d1440):
 *   .vc_row.wpb_row.vc_row-fluid  w=1170  x=135  ml/mr=-15px
 *     h1  w=1140  fs=42/500/lh:46.2/color:rgb(57,66,79)  mb=0
 *     p   w=847.5 fs=16/500/lh:27.2/color:#000            mb=0
 *          (p width constrained by Bootstrap .col-md-9 = 75% at ≥md,
 *           full-width at <768)
 *
 * STG deltas without this CSS:
 *   container w -30, x +15    → LIVE has -15px lateral margin on row
 *   h1 mb +25                 → Gutenberg default heading mb (handled inline in markup)
 *   p  mb +25                 → Gutenberg default p mb (handled inline in markup)
 *   p  w +292 desktop         → LIVE p constrained to ~847.5px via Bootstrap col-md-9
 * =========================================================================== */

/* Restore LIVE's -15px lateral margin on the hero container (row-fluid emulation).
 * Parent .entry-content.container has px:15, so ml/mr:-15 pushes edges flush.
 * Increases container width from 1140 → 1170, shifts x from 150 → 135 (at d1440).
 *
 * padding-inline:15 restores children (h1/p) back to natural 1140 width so h1 x=150
 * matches LIVE. This gives us LIVE's `.vc_row.wpb_row.vc_row-fluid` (mx:-15) +
 * `.vc_column-inner` (px:15) two-layer offset in ONE hero div.
 *
 * padding-bottom:35 restores the 35px trailing whitespace LIVE has from
 * `.vc_column-inner` pt/pb:35 (WPBakery baseline; see memory:
 * reference_wpbakery_col_inner_padding_compensation.md). */
body.page-id-95399 .trc-ft-s0-hero,
body.page-id-966 .trc-ft-s0-hero {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 35px;
}

/* Belt-and-suspenders — margins already inline in markup, but Gutenberg core
 * default of margin-block-start:0.67em / mb:25px is high specificity via
 * .wp-block-heading + .wp-block > * cascades. Force to 0 explicitly. */
body.page-id-95399 .trc-ft-s0-hero .trc-ft-s0-title,
body.page-id-966 .trc-ft-s0-hero .trc-ft-s0-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
}

body.page-id-95399 .trc-ft-s0-hero .trc-ft-s0-body,
body.page-id-966 .trc-ft-s0-hero .trc-ft-s0-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 27.2px !important;
}

/* Constrain body paragraph to LIVE's ~75% width at ≥md (Bootstrap .col-md-9).
 * At <768 → full-width (Bootstrap col-xs-12 behavior). */
@media (min-width: 768px) {
    body.page-id-95399 .trc-ft-s0-hero .trc-ft-s0-body,
body.page-id-966 .trc-ft-s0-hero .trc-ft-s0-body {
        /* LIVE measured p width at d1440: 847.5 out of parent 1140 → 74.34%
         * Use max-width in px so we hit LIVE exactly at d1440/d1920. */
        max-width: 847.5px;
    }
}

/* ===========================================================================
 * S1 VIDEO GRID — LIVE-parity corrections
 *
 * The video grid is emitted by [video_filter_grid] shortcode (in functions.php)
 * which outputs the LIVE `.vc_grid-*` DOM. Because WPBakery plugin is dequeued
 * on STG, several plugin-provided CSS rules are missing, causing:
 *   - Grid wrapper has h=0 (float items don't extend parent)
 *   - Items are `display:block; float:left` (LIVE uses inline-block, no float)
 *   - Item padding is 15/15 (LIVE has 0/30)
 *   - Slide wrapper is 1140w (LIVE is 1170w — -15px extension)
 *   - Zone-C has 20px inner padding (LIVE has 0)
 *
 * Restore LIVE layout via page-scoped CSS. Applied 2026-08-05 during S1 verify.
 * =========================================================================== */

/* 2026-08-06 KAAM-vlib-gray-overlay — REVERTED after LIVE screenshot review.
 * LIVE INTENTIONALLY shows gray on locked cards (tier user doesn't have access to)
 * and full-color on accessible cards. Gray is a UX signal, not a bug.
 * Prior override that disabled all gray on page 966 was wrong.
 * Access-based grayscale via race-club.css:1951 (lane-1/2 scoping) + inline
 * `_wpb_post_custom_css` postmeta rules is the correct behavior. */

/* Slide wrapper — restore the -15px extension so items compute to 292.5 (25% of 1170)
 * instead of 285 (25% of 1140). Also collapse inline-block whitespace via font-size:0
 * so 4 cards of 292.5 each fit in the 1170 row (default whitespace char ~4px causes
 * (292.5+4)*4=1186 to overflow → wraps to 3-per-row). Font-size restored on children. */
body.page-id-95399 .vc_grid-container .vc_pageable-slide-wrapper,
body.page-id-966 .vc_grid-container .vc_pageable-slide-wrapper {
    /* 2026-08-06 KAAM-freetraining v3 — match LIVE margin exactly.
       LIVE .vc_pageable-slide-wrapper has margin: 0 -30px 0 0 (negative RIGHT
       only, to accommodate the 30px pr on last card in row). Symmetric
       -15/-15 (Bootstrap .row default) pushed cards 15px LEFT of the grid,
       breaking alignment with the paragraph above.
       Anuja QA: "paragraph and cards should be aligned in one line". */
    margin-left: 0;
    margin-right: -30px;
    font-size: 0;
    letter-spacing: 0;
}
body.page-id-95399 .vc_grid-container .vc_pageable-slide-wrapper > .vc_grid-item,
body.page-id-966 .vc_grid-container .vc_pageable-slide-wrapper > .vc_grid-item {
    font-size: 16px;   /* restore inherited size for card children */
}

/* Grid wrapper — clear floats + set position:relative to match LIVE.
 * Even though we're switching items to inline-block below, LIVE's wrapper is
 * position:relative for the pageable-nav absolute positioning. */
body.page-id-95399 .vc_grid-container .vc_grid.vc_pageable-wrapper,
body.page-id-966 .vc_grid-container .vc_grid.vc_pageable-wrapper {
    position: relative;
    /* No overflow:auto — LIVE is overflow:visible. Items are inline-block so
     * they naturally extend the parent. */
}

/* Items: inline-block + no float + no lateral padding (LIVE uses pr:30 for gutter). */
body.page-id-95399 .vc_grid-container .vc_grid-item,
body.page-id-966 .vc_grid-container .vc_grid-item {
    display: inline-block !important;
    float: none !important;
    position: relative !important;
    vertical-align: top;              /* prevents inline-block baseline gap */
    padding-left: 0 !important;
    padding-right: 30px !important;   /* LIVE uses pr:30 as gutter */
    /* Width falls out of vc_col-sm-3 = 25% of (extended) 1170 parent = 292.5 */
}

/* 2026-08-06 KAAM-vlib-3col — video-library page 966: LIVE renders 3-col
   grid at 1440 (not 4-col like freetraining 95399). Override .vc_col-sm-3
   to 33.33% specifically for page 966. Freetraining 95399 stays 25%. */
@media (min-width: 992px) {
    body.page-id-966 .vc_grid-container .vc_pageable-slide-wrapper > .vc_grid-item.vc_col-sm-3 {
        width: 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

/* Zone-C — remove Bootstrap default padding so inner card content sits flush. */
body.page-id-95399 .vc_grid-container .vc_gitem-zone-c,
body.page-id-966 .vc_grid-container .vc_gitem-zone-c {
    padding: 0 !important;
}

/* Trailing space below "Read more" button — LIVE has ~63px total gap:
 *   .vc_gitem-col has pb:10, .vc_btn3-container has mb:21.7, card outer has pb:30
 * Combined restores LIVE's card breathing room. Missing on STG (WPBakery CSS gone). */
body.page-id-95399 .vc_grid-container .vc_grid-item .vc_gitem-col,
body.page-id-966 .vc_grid-container .vc_grid-item .vc_gitem-col {
    padding-bottom: 10px !important;
}
body.page-id-95399 .vc_grid-container .vc_grid-item .vc_btn3-container,
body.page-id-966 .vc_grid-container .vc_grid-item .vc_btn3-container {
    margin-bottom: 21.74px !important;
}
body.page-id-95399 .vc_grid-container .vc_grid-item,
body.page-id-966 .vc_grid-container .vc_grid-item {
    padding-bottom: 30px !important;   /* space below card-mini before next row */
}

/* Grid item last-in-row: LIVE has pr:0 on the 4th column item to prevent overflow.
 * Since we can't rely on :nth-child(4n) matching perfectly if items reorder due to
 * filters, we accept the pr:30 on all items — the parent has -15px extension
 * absorbing the trailing 15px, so no visible overflow. */

/* Responsive — at ≤991 LIVE switches items to 2-column (.vc_col-sm-3 becomes
 * effectively 50%). Keep the same inline-block + pr:30 pattern. */
@media (max-width: 991px) {
    body.page-id-95399 .vc_grid-container .vc_grid-item,
body.page-id-966 .vc_grid-container .vc_grid-item {
        /* Bootstrap 3 .vc_col-sm-3 collapses to full width at <768; at 768-991
         * needs custom handling. Test after deploy. */
    }
}

/* ===========================================================================
 * FILTER UL — restore LIVE horizontal red-pill tabs
 * WPBakery js_composer.min.css provides these on LIVE. Plugin dequeued → STG
 * renders default UL (bullets, vertical stack, 462px tall vs LIVE 36px).
 * =========================================================================== */
body.page-id-95399 .vc_grid-container .vc_grid-filter,
body.page-id-966 .vc_grid-container .vc_grid-filter {
    list-style: none !important;
    padding: 0 !important;
    text-align: center !important;
    margin: 0 0 20px !important;
    line-height: 22.8571px;
}
/* Inactive tab: no pill, transparent bg, black text — matches LIVE. */
body.page-id-95399 .vc_grid-container .vc_grid-filter-item,
body.page-id-966 .vc_grid-container .vc_grid-filter-item {
    display: inline-block !important;
    padding: 2px 10px !important;
    margin: 0 5px 5px 0 !important;
    background-color: transparent !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    line-height: 27.2px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s;
    list-style: none;
}
body.page-id-95399 .vc_grid-container .vc_grid-filter-item > span,
body.page-id-966 .vc_grid-container .vc_grid-filter-item > span {
    color: #000000 !important;
    display: inline !important;
    text-decoration: none;
}
/* Active tab ONLY: pink-red pill + white text (LIVE #f4524d). */
body.page-id-95399 .vc_grid-container .vc_grid-filter-item.vc_active,
body.page-id-966 .vc_grid-container .vc_grid-filter-item.vc_active {
    background-color: #f4524d !important;
}
body.page-id-95399 .vc_grid-container .vc_grid-filter-item.vc_active > span,
body.page-id-966 .vc_grid-container .vc_grid-filter-item.vc_active > span {
    color: #ffffff !important;
}
/* Hover on inactive tabs: subtle color change (LIVE has same). */
body.page-id-95399 .vc_grid-container .vc_grid-filter-item:hover > span,
body.page-id-966 .vc_grid-container .vc_grid-filter-item:hover > span {
    color: #d72925 !important;
}
body.page-id-95399 .vc_grid-container .vc_grid-filter-item.vc_active:hover > span,
body.page-id-966 .vc_grid-container .vc_grid-filter-item.vc_active:hover > span {
    color: #ffffff !important;   /* keep white on already-active tab */
}
/* LIVE hides filter UL on ≤991 (WPBakery js_composer.min.css behavior).
   Match to prevent 2-row wrap taking 72px of vertical space on tablet/mobile. */
@media (max-width: 991px) {
    body.page-id-95399 .vc_grid-container .vc_grid-filter,
body.page-id-966 .vc_grid-container .vc_grid-filter {
        display: none !important;
    }
}

/* ===========================================================================
 * CARD BUTTONS — restore LIVE flat + modern button styles
 * WPBakery vc_btn3 CSS is missing → both buttons render as unstyled inline
 * anchors. Restore per-variant styling matching LIVE's measured values.
 * =========================================================================== */
/* "Read more" — vc_btn3-style-flat (solid red, white text, block-level) */
body.page-id-95399 .vc_grid-item a.vc_btn3.vc_btn3-style-flat.vc_btn3-color-juicy-pink,
body.page-id-966 .vc_grid-item a.vc_btn3.vc_btn3-style-flat.vc_btn3-color-juicy-pink {
    display: inline-block !important;
    font-weight: 500 !important;
    background-color: #d72925 !important;
    color: #ffffff !important;
    line-height: 50px !important;
    padding: 0 40px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: background-color 0.2s;
}
body.page-id-95399 .vc_grid-item a.vc_btn3.vc_btn3-style-flat.vc_btn3-color-juicy-pink:hover,
body.page-id-966 .vc_grid-item a.vc_btn3.vc_btn3-style-flat.vc_btn3-color-juicy-pink:hover {
    background-color: #f4524d !important;
    color: #ffffff !important;
}
/* "Login" — vc_btn3-style-modern (bordered red pill, small pad) */
body.page-id-95399 .vc_grid-item a.vc_btn3.vc_btn3-style-modern.vc_btn3-color-juicy-pink,
body.page-id-966 .vc_grid-item a.vc_btn3.vc_btn3-style-modern.vc_btn3-color-juicy-pink {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: normal !important;
    padding: 14px 20px !important;
    background-color: #d72925 !important;
    color: #ffffff !important;
    border: 1px solid #f4524d !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: background-color 0.2s;
}
body.page-id-95399 .vc_grid-item a.vc_btn3.vc_btn3-style-modern.vc_btn3-color-juicy-pink:hover,
body.page-id-966 .vc_grid-item a.vc_btn3.vc_btn3-style-modern.vc_btn3-color-juicy-pink:hover {
    background-color: #f4524d !important;
    border-color: #d72925 !important;
    color: #ffffff !important;
}

/* ===========================================================================
 * WOOCOMMERCE RESTRICTION MESSAGE — LIVE has WC info-box card styling
 * On LIVE this box has bg:#f6f5f8, top-border:3px, padding, colored text.
 * STG WC message-box CSS not applied inside .vc_grid-item context.
 * =========================================================================== */
body.page-id-95399 .vc_grid-item .woocommerce-info,
body.page-id-966 .vc_grid-item .woocommerce-info {
    background-color: #f6f5f8 !important;
    color: #515151 !important;
    padding: 16px 32px 16px 56px !important;
    margin: 32px 0 !important;
    border-top: 3px solid #0d1117 !important;
    font-size: 16px !important;
    line-height: 22.8571px !important;
    position: relative !important;
}
body.page-id-95399 .vc_grid-item .woocommerce-info a,
body.page-id-966 .vc_grid-item .woocommerce-info a {
    color: #d72925 !important;
    text-decoration: underline !important;
}
body.page-id-95399 .vc_grid-item .woocommerce-info a:hover,
body.page-id-966 .vc_grid-item .woocommerce-info a:hover {
    color: #f4524d !important;
}

/* Hidden items — filter JS toggles display:none on non-matching cards. Preserve
 * inline-block behavior for visible items (defensive against reflow). */
body.page-id-95399 .vc_grid-container .vc_grid-item[style*="display: none"],
body.page-id-966 .vc_grid-container .vc_grid-item[style*="display: none"] {
    display: none !important;
}

/* ===========================================================================
 * "UPGRADE YOUR SUBSCRIPTION" MODAL — native replacement for LIVE's Ultimate
 * VC Addons [ult_modal] popup that fires on Login button click.
 * Values below all measured from LIVE (see _ft_live_modal_measure.cjs 2026-08-05):
 *   overlay: fixed, bg rgba(12,12,12,0.95), z-index 16777271
 *   modal:   504px wide, positioned ~450px from top, z-index 99
 *   content: white bg, border 2px solid #333
 *   header:  padding 10/20, h3 fw:700 color:#333 fs:16 lh:24
 *   body:    padding 15/20
 *   image:   140px wide, centered, mb 24
 *   close X: 80x80 top-right, white "Close" text
 * =========================================================================== */
body #trc-video-signup-modal.ult-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 16777271;
    text-align: center;
}
/* Width = 35% of viewport on desktop/tablet, matching LIVE Ultimate VC Addons
 * "ult-small" preset (measured: d1920=672, d1440=504, t768=268.8 → all 35%).
 * On mobile (<480) LIVE bumps to ~83% to stay readable. */
body #trc-video-signup-modal.ult-overlay .ult_modal {
    position: relative;
    display: inline-block;
    width: 35%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    text-align: left;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-content {
    background-color: #ffffff;
    border-style: solid;
    border-width: 2px;
    border-color: #333333;
    border-radius: 0;
    overflow: hidden;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-header {
    background-color: #ffffff;
    color: #333333;
    border-bottom: 1px solid #333333;
    padding: 0;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-title {
    color: #333333;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 20px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-body {
    background-color: #ffffff;
    padding: 15px 20px;
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-body img {
    display: block;
    margin: 0 auto 24px;
    width: 140px;
    height: auto;
    max-width: 100%;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-body p {
    text-align: center;
    margin: 0 0 16px;
    color: #000000;
    font-size: 16px;
    line-height: 24px;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-body a.vc_btn3.vc_btn3-style-flat.vc_btn3-color-juicy-pink {
    display: inline-block;
    background-color: #d72925 !important;
    color: #ffffff !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 50px;
    padding: 0 40px;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
}
body #trc-video-signup-modal.ult-overlay .ult_modal-body a.vc_btn3:hover {
    background-color: #f4524d !important;
}
body #trc-video-signup-modal.ult-overlay .ult-overlay-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 100;
}
body #trc-video-signup-modal.ult-overlay .ult-overlay-close-inside {
    color: #ffffff;
    font-size: 0;                    /* hide "Close" text — LIVE shows only X */
    width: 80px;
    height: 80px;
    position: relative;
}
/* Draw the X via two rotated pseudo-lines */
body #trc-video-signup-modal.ult-overlay .ult-overlay-close-inside::before,
body #trc-video-signup-modal.ult-overlay .ult-overlay-close-inside::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 2px;
    background-color: #ffffff;
    transform-origin: center;
}
body #trc-video-signup-modal.ult-overlay .ult-overlay-close-inside::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
body #trc-video-signup-modal.ult-overlay .ult-overlay-close-inside::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
body #trc-video-signup-modal.ult-overlay .ult-overlay-close:hover .ult-overlay-close-inside::before,
body #trc-video-signup-modal.ult-overlay .ult-overlay-close:hover .ult-overlay-close-inside::after {
    background-color: #f4524d;
}

/* Mobile: bump to 83% (LIVE measured 312.8 / 375 = 83.4%) + smaller close X */
@media (max-width: 480px) {
    body #trc-video-signup-modal.ult-overlay .ult_modal {
        width: 83%;
    }
    body #trc-video-signup-modal.ult-overlay .ult-overlay-close,
    body #trc-video-signup-modal.ult-overlay .ult-overlay-close-inside {
        width: 60px;
        height: 60px;
    }
}


/* ===========================================================================
 * 2026-08-07 — [trc_video_grid] zone-c box-model LIVE parity.
 * Measured via _ftv_v3_zonec_chain.cjs on the same card both sides:
 *   .vc_gitem-col        LIVE p:10/10/10/10  vs STG 0/15/15 (Bootstrap col emu)
 *   title-div  mb        LIVE 15px           vs STG 0
 *   excerpt-div mb       LIVE 15px           vs STG 0
 * Inner content width 240.5 (LIVE) vs 230.5 (STG) came from the col padding.
 * Scoped to page 95399 ONLY — page 966 uses .video-item DOM, unaffected.
 * =========================================================================== */
body.page-id-95399 .vc_grid-container .vc_grid-item .vc_gitem-col {
    padding: 10px !important;
}
body.page-id-95399 .vc_grid-container .vc_grid-item .vc_gitem-post-data-source-post_title {
    margin-bottom: 15px !important;
}
body.page-id-95399 .vc_grid-container .vc_grid-item .vc_gitem-post-data-source-post_excerpt {
    margin-bottom: 15px !important;
}