/*
 * pat-fi-activity.css - self-contained styles for [activity-ftf-*].
 *
 * Loaded conditionally by PAT_FI_Activity_Shortcodes::maybe_enqueue_
 * assets() when the current post uses one of our shortcodes, plus a
 * safety-net enqueue at render time for widgets / block patterns /
 * do_shortcode() callers.
 *
 * Scope
 * -----
 * The big hero card's outer classes (.activity-box-large, .abl-img,
 * .abl-desc, .abl-title, .abl-subtitle, .abl-text) are owned by the
 * pilotaptitudetest.com theme - the same rules that style PRVI heroes
 * style ours. This file does NOT touch those classes.
 *
 * What this file styles:
 *   - .ftf-airline-block       outer wrapper around hero + rows
 *   - .ftf-sim-slideshow       F2F-namespaced slideshow (mirrors PRVI's
 *                              prvi-sim-slideshow layout so behaviour
 *                              is identical but selectors are distinct)
 *   - .ftf-pack-rows           row container under the hero
 *   - .ftf-pack-row            individual pack row (its own .link)
 *   - .ftf-pack-row-*          row internals (accent, tint, body, cta)
 */


/* ================================================================
 *   Outer wrapper
 * ================================================================ */

.ftf-airline-block {
    margin: 1.5em 0;
    box-sizing: border-box;
}
.ftf-airline-block *,
.ftf-airline-block *::before,
.ftf-airline-block *::after {
    box-sizing: inherit;
}


/* ================================================================
 *   Encoding-safe bullet override
 *
 * v1.38.20: the pilotaptitudetest.com theme's CSS renders the
 * bullets on .abl-text list items via `content: "•"` in a ::before
 * pseudo-element. The bullet character (U+2022) is UTF-8 encoded in
 * the theme's file as three bytes (0xE2 0x80 0xA2), but the file is
 * served with a charset the browser reads as Windows-1252, which
 * decodes those bytes as "•". Result: every bullet in an F2F
 * airline hero card renders as "•" instead of "•".
 *
 * We can't fix the theme's CSS from here, so we override its
 * bullet ::before rule with our own that uses a Unicode escape
 * (\2022). Unicode escapes in CSS `content` are decoded from the
 * CSS parser's own tables, not from file bytes, so they're
 * encoding-independent - the bullet always renders correctly no
 * matter how the file is saved or served.
 *
 * Scoped to .ftf-airline-hero so PRVI cards on the same page keep
 * whatever bullet rendering the theme currently gives them.
 * ================================================================ */

.ftf-airline-hero .abl-text li::before,
.link.activity-box-large.ftf-airline-hero .abl-text li::before {
    content: "\2022" !important;
}


/* ================================================================
 *   Panel feature-icon classes (F2F-owned, all 9)
 *
 * v1.38.23: switched all 9 feature classes to F2F-owned styles so
 * each icon can be fine-tuned independently. Previously 6 features
 * reused theme classes (formats, branching, training-mode, etc);
 * now every feature has its own .ftf-* class with the plugin's
 * own CSS and SVG assets, so nothing in the panel depends on the
 * theme's product-pages.css.
 *
 * Every rule follows the same 5-property shape (mirroring the
 * theme's own pattern for consistency):
 *
 *   background-image, background-repeat, background-size,
 *   background-position-x, padding-left
 *
 * Baseline defaults: 70px background-size, 6px position-x, 100px
 * padding-left. Each class can override any of those independently
 * to fine-tune - e.g. if a specific SVG needs to sit 4px lower or
 * be scaled down to 62px because its glyph is inherently taller,
 * change that class's rule without touching the others.
 *
 * SVGs live at ../img/features/*.svg (relative to this CSS file
 * at assets/css/pat-fi-activity.css).
 * ================================================================ */

/* v1.38.28: format-specific icons. Interview format varies by pack
 * and by airline aggregate - a one-to-one interview at Skyborne looks
 * different from a panel at Aegean, and airlines that offer multiple
 * formats need a mixed indicator. Four classes below, resolved by
 * the PHP {format_class} token based on pack.format (pack panels) or
 * the aggregate unique_formats() of the airline's packs (airline
 * panel). Each class has the same styling shape - only the icon SVG
 * differs. */

.public-sidebar .ftf-format-panel {
    background-image: url("../img/features/format-panel.svg");
    background-repeat: no-repeat;
    background-size: 83px;
    background-position-x: 1px;
    padding-left: 100px;
}

.public-sidebar .ftf-format-one-to-one {
    background-image: url("../img/features/format-one-to-one.svg");
    background-repeat: no-repeat;
    background-size: 70px;
    background-position-x: 6px;
    padding-left: 100px;
}

.public-sidebar .ftf-format-speed {
    background-image: url("../img/features/format-speed.svg");
    background-repeat: no-repeat;
    background-size: 70px;
    background-position-x: 6px;
    padding-left: 100px;
}

.public-sidebar .ftf-format-mixed {
    background-image: url("../img/features/format-mixed.svg");
    background-repeat: no-repeat;
    background-size: 72px;   /* slightly larger - the 3-thumbnail
                                composition needs a touch more room
                                to keep its sub-elements legible */
    background-position-x: 5px;
    padding-left: 100px;
}

.public-sidebar .ftf-dynamic-flow {
    background-image: url("../img/features/dynamic-flow.svg");
    background-repeat: no-repeat;
    background-size: 85px;
    background-position-x: -5px;
    padding-left: 100px;
}

.public-sidebar .ftf-training-mode {
    background-image: url("../img/features/training-mode.svg");
    background-repeat: no-repeat;
    background-size: 70px;
    background-position-x: 6px;
    padding-left: 100px;
}

.public-sidebar .ftf-claude-analysis {
    background-image: url("../img/features/claude-analysis.svg");
    background-repeat: no-repeat;
    background-size: 80px;   /* slightly smaller - the asterisk mark
                                fills its viewBox edge-to-edge so it
                                reads too dense at 70px */
    background-position-x: 1px;
    padding-left: 100px;
}

.public-sidebar .ftf-session-replay {
    background-image: url("../img/features/session-replay.svg");
    background-repeat: no-repeat;
    background-size: 87px;   /* frame + REC text + audio waves - a
                                touch larger keeps the elements legible */
    background-position-x: -7px;
    padding-left: 100px;
}

.public-sidebar .ftf-transcript {
    background-image: url("../img/features/transcript.svg");
    background-repeat: no-repeat;
    background-size: 78px;
    background-position-x: 0px;
    padding-left: 100px;
}

.public-sidebar .ftf-authored {
    background-image: url("../img/features/authored.svg");
    background-repeat: no-repeat;
    background-size: 70px;
    background-position-x: 6px;
    padding-left: 100px;
}

.public-sidebar .ftf-org-info {
    background-image: url("../img/features/org-info.svg");
    background-repeat: no-repeat;
    background-size: 75px;
    background-position-x: 6px;
    padding-left: 100px;
}

.public-sidebar .ftf-progress {
    background-image: url("../img/features/progress.svg");
    background-repeat: no-repeat;
    background-size: 68px;   /* chart + axes need a bit of breathing
                                room from the neighbouring text */
    background-position-x: 7px;
    padding-left: 100px;
}

.public-sidebar .ftf-pause-resume {
    background-image: url("../img/features/pause-resume.svg");
    background-repeat: no-repeat;
    background-size: 85px;
    background-position-x: 0px;
    padding-left: 100px;
}

/* Small-viewport responsive: shrink every F2F icon uniformly on
   narrow phones so the padding-left doesn't eat too much of the
   feature body's horizontal space. Matches the theme's own pattern
   for its icon classes at the same breakpoint. */
@media screen and (min-width: 340px) and (max-width: 439px) {
    .public-sidebar .ftf-format-panel,
    .public-sidebar .ftf-format-one-to-one,
    .public-sidebar .ftf-format-speed,
    .public-sidebar .ftf-format-mixed,
    .public-sidebar .ftf-dynamic-flow,
    .public-sidebar .ftf-training-mode,
    .public-sidebar .ftf-claude-analysis,
    .public-sidebar .ftf-session-replay,
    .public-sidebar .ftf-transcript,
    .public-sidebar .ftf-authored,
    .public-sidebar .ftf-org-info,
    .public-sidebar .ftf-progress,
    .public-sidebar .ftf-pause-resume {
        padding-left: 60px !important;
        background-size: 45px !important;
        background-position: -1px -4px !important;
    }
}


/* ================================================================
 *   Slideshow
 *   (Layout mirrors the PRVI slideshow in prvi_build_activity_box,
 *    with classes renamed so the two can coexist without collision.)
 * ================================================================ */

/* v1.38.67: these are PRVI's working slideshow rules (prvi_build_activity_
   box) with the selector renamed, nothing added. .abl-img is a flex:1 item
   of the theme's .activity-box-large row, so it stretches to the text
   column's height by itself; the slideshow must NOT set its own height.
   Slides take 90% of that height, leaving the bottom strip for the dots;
   images are sized by width so they never overlap the dots. The two
   media queries give the frame a fixed height once the hero stacks. */
.ftf-sim-slideshow { position: relative; width: 100%; }
.ftf-sim-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 86%;   /* was 90%: a little more clearance above the dots */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.ftf-sim-slideshow .slide.active { opacity: 1; }
/* Our slides are taller than PRVI's, so they are capped by height as well
   as width: an image is as large as it can be without leaving the slide
   (the slide is 90% of the column, so the dots' strip stays clear). */
.ftf-sim-slideshow .slide img {
    display: block;
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: min(100%, 400px);   /* never taller than the slide, and never past 400px on wide screens */
    object-fit: contain;
    border-radius: 4px;
    box-shadow: none;
}
.ftf-sim-slideshow .slide:first-child img { max-width: 85%; }
.ftf-sim-slideshow .slide:nth-child(2) img,
.ftf-sim-slideshow .slide:nth-child(3) img,
.ftf-sim-slideshow .slide:nth-child(4) img { max-width: 85%; }
.ftf-sim-slideshow .slideshow-dots {
    text-align: center;
    padding: 6px 0;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}
.ftf-sim-slideshow .dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #d8d8d8;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
}
.ftf-sim-slideshow .dot.active,
.ftf-sim-slideshow .dot:hover { background-color: #8b8b8b; }
@media screen and (max-width: 900px) { .abl-img.slideshow-container.ftf-sim-slideshow { height: 350px !important; } }
@media screen and (max-width: 450px) { .abl-img.slideshow-container.ftf-sim-slideshow { height: 280px !important; } }


/* ================================================================
 *   Thin pack rows
 * ================================================================ */

/* v1.38.68: .ftf-pack-rows is also .activities-container, so the theme's
   grid supplies the gaps and the responsive behaviour. Two differences from
   the theme's own boxes: the gap under the hero matches the two <br> the
   other product heroes carry (about 48px), and the columns are capped at
   two, because the theme's auto-fill grid fits three 400px columns on a
   wide page and a pack row is too tight at that width. */
/* Column rule: the theme's minimum at each breakpoint, or half the row
   width, whichever is larger; so the grid collapses to one column at the
   same widths as the other activity boxes, but never shows three. */
.ftf-pack-rows {
    margin-top: 48px;
    grid-template-columns: repeat(auto-fill, minmax(max(400px, calc(50% - 30px)), 1fr));
}
/* The role alone on the meta line below 1440px, so it stays on one line. */
@media screen and (max-width: 1440px) and (min-width: 700px) {
    .ftf-pack-row-meta-detail { display: none; }
}
@media screen and (max-width: 1025px) {
    .ftf-pack-rows { grid-template-columns: repeat(auto-fill, minmax(max(290px, calc(50% - 10px)), 1fr)); }
}
@media screen and (max-width: 700px) {
    .ftf-pack-rows { grid-template-columns: minmax(0, 1fr); }
}
/* v1.38.68: the brand accent sits on the right edge of the row. */
.ftf-pack-row-accent { order: 99; }
.ftf-pack-row-container { min-width: 0; }
.ftf-pack-row-container .ftf-pack-row { width: 100%; }

.ftf-pack-row {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 0.5px solid #ececea;
    border-radius: 3px;
    height: 120px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 10px rgb(238 238 238);
    transition: 0.2s;
    cursor: pointer;
}
.ftf-pack-row:hover,
.ftf-pack-row:focus-visible {
    cursor: pointer !important;
    box-shadow: 0px 0px 5px 1px #3793d178 !important;
    border: 1px solid #00acdd;
}
.ftf-pack-row:focus-visible {
    box-shadow: 0 0 0 2px rgba(59, 98, 160, 0.5), 0 4px 14px rgba(0, 0, 0, 0.07);
}

.ftf-pack-row-accent {
    flex: 0 0 6px;
    width: 4px;
    align-self: stretch;
}
.ftf-pack-row-tint {
    flex: 0 0 136px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.ftf-pack-row-tint img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.ftf-pack-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 6px 5px 24px;
    gap: 7px;
}
.ftf-pack-row-title {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Inter';
    color: #424b52;
    line-height: 1.35;
}
.ftf-pack-row-meta {
    font-size: 16px;
    color: #626262;
    line-height: 1.35;
}
.ftf-pack-row-cta {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #999999;
}
.ftf-pack-row-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform .18s ease, color .18s ease;
    display: none;
}
.ftf-pack-row:hover .ftf-pack-row-arrow,
.ftf-pack-row:focus-visible .ftf-pack-row-arrow {
    color: #1a2340;
    transform: translateX(3px);
}


/* ================================================================
 *   Responsive
 * ================================================================ */

@media (max-width: 1025px) {
    .ftf-pack-row { height: 87px; }
    .ftf-pack-row-body {gap: 4px;padding: 12px 6px 0px 14px;}
    .ftf-pack-row-tint {flex: 0 0 90px; padding: 5px 0 0 0;}
    .ftf-pack-row-accent {flex: 0 0 3px;}
    .ftf-pack-row-title { font-size: 17px; }
    .ftf-pack-row-meta { font-size: 15px; }
}

@media (max-width: 900px) {
    .ftf-pack-row-title { font-size: 16px; }
    .ftf-pack-row-meta {font-size: 12px;}
}    

@media (max-width: 700px) {
    .ftf-pack-row { height: 67px; }
    .ftf-pack-row-body {gap: 0px;padding: 11px 14px 0px;}
    .ftf-pack-row-tint {flex: 0 0 70px; padding: 5px 0 0 0;}
    .ftf-pack-row-accent {/* display: none; */}
    .ftf-pack-row-title { font-size: 16px; }
    .ftf-pack-row-meta { font-size: 13px; line-height: 1.85}    
}

@media (max-width: 600px) {
    .ftf-pack-row { height: 87px; }
    .ftf-pack-row-body {padding: 14px 14px 0px 25px;}
    .ftf-pack-row-title { font-size: 18px; }
    .ftf-pack-row-meta { font-size: 15px; line-height: 2.25}
    .ftf-pack-row-meta-detail { display: none; }
    .ftf-pack-row-tint {flex: 0 0 95px; padding: 5px 0 0 0;}
}

@media (max-width: 490px) {
    .ftf-pack-row-body {padding: 12px 6px 0px 20px; gap: 4px}
    .ftf-pack-row-title {font-size: 16px;}
    .ftf-pack-row-meta {font-size: 14px;line-height: 1.2;}
}