/* ============================================================
   TFS Programs page (template-programs.php)
   Loaded only on pages using the "TFS Programs" template.

   Part 1 is the page's former WPBakery Custom CSS (Page Settings),
   values unchanged. Part 2 reproduces the bits of WPBakery's layout
   CSS the page relied on, so the page no longer depends on WPBakery.
   ============================================================ */

/* ---------- Part 1: page CSS (from WPBakery Custom CSS) ---------- */

/* This page has its own logo header; hide the theme header and footer. */
header,
footer {
    display: none !important;
}

.tfs-programs h4 {
    font-weight: 200;
    font-size: 1.4em;
}

.tfs-programs h3,
.tfs-programs h5 {
    margin-top: 0.5em;
}

.tfs-programs .gradtext {
    color: #ff405c;
}

.tfs-programs .box {
    box-shadow: 0 0 25px 0 hsla(0, 0%, 7%, .2);
    padding: 40px;
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
}

.tfs-programs .sc_button {
    border-radius: 28px;
    font-family: inherit;
    color: #fff;
    font-size: 16px;
    background: #e92e5b;
    padding: 10px 20px;
    border: 0 !important;
    text-decoration: none;
    margin: 10px 0 !important;
    display: inline-block !important;
}

/* Crossfade galleries: pure CSS, no JS. tfs-3 / tfs-4 / tfs-5 = image count. */
.tfs-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
}

.tfs-gallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.tfs-gallery:hover img,
.tfs-gallery:hover .tfs-dots span {
    animation-play-state: paused;
}

.tfs-3 img:nth-child(1) { animation: tfs-cf3-1 9s infinite; }
.tfs-3 img:nth-child(2) { animation: tfs-cf3-2 9s infinite; }
.tfs-3 img:nth-child(3) { animation: tfs-cf3-3 9s infinite; }

@keyframes tfs-cf3-1 { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tfs-cf3-2 { 0%, 28% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tfs-cf3-3 { 0%, 61% { opacity: 0; } 66%, 95% { opacity: 1; } 100% { opacity: 0; } }

.tfs-4 img:nth-child(1) { animation: tfs-cf4-1 12s infinite; }
.tfs-4 img:nth-child(2) { animation: tfs-cf4-2 12s infinite; }
.tfs-4 img:nth-child(3) { animation: tfs-cf4-3 12s infinite; }
.tfs-4 img:nth-child(4) { animation: tfs-cf4-4 12s infinite; }

@keyframes tfs-cf4-1 { 0%, 21% { opacity: 1; } 25%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tfs-cf4-2 { 0%, 21% { opacity: 0; } 25%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tfs-cf4-3 { 0%, 46% { opacity: 0; } 50%, 71% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes tfs-cf4-4 { 0%, 71% { opacity: 0; } 75%, 96% { opacity: 1; } 100% { opacity: 0; } }

.tfs-5 img:nth-child(1) { animation: tfs-cf5-1 15s infinite; }
.tfs-5 img:nth-child(2) { animation: tfs-cf5-2 15s infinite; }
.tfs-5 img:nth-child(3) { animation: tfs-cf5-3 15s infinite; }
.tfs-5 img:nth-child(4) { animation: tfs-cf5-4 15s infinite; }
.tfs-5 img:nth-child(5) { animation: tfs-cf5-5 15s infinite; }

@keyframes tfs-cf5-1 { 0%, 16% { opacity: 1; } 20%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tfs-cf5-2 { 0%, 16% { opacity: 0; } 20%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes tfs-cf5-3 { 0%, 36% { opacity: 0; } 40%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes tfs-cf5-4 { 0%, 56% { opacity: 0; } 60%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes tfs-cf5-5 { 0%, 76% { opacity: 0; } 80%, 96% { opacity: 1; } 100% { opacity: 0; } }

.tfs-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 2;
}

.tfs-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tfs-3 .tfs-dots span:nth-child(1) { animation: tfs-d3-1 9s infinite; }
.tfs-3 .tfs-dots span:nth-child(2) { animation: tfs-d3-2 9s infinite; }
.tfs-3 .tfs-dots span:nth-child(3) { animation: tfs-d3-3 9s infinite; }

@keyframes tfs-d3-1 { 0%, 28% { background: rgba(255,255,255,0.95); } 33%, 95% { background: rgba(255,255,255,0.4); } 100% { background: rgba(255,255,255,0.95); } }
@keyframes tfs-d3-2 { 0%, 28% { background: rgba(255,255,255,0.4); } 33%, 61% { background: rgba(255,255,255,0.95); } 66%, 100% { background: rgba(255,255,255,0.4); } }
@keyframes tfs-d3-3 { 0%, 61% { background: rgba(255,255,255,0.4); } 66%, 95% { background: rgba(255,255,255,0.95); } 100% { background: rgba(255,255,255,0.4); } }

.tfs-4 .tfs-dots span:nth-child(1) { animation: tfs-d4-1 12s infinite; }
.tfs-4 .tfs-dots span:nth-child(2) { animation: tfs-d4-2 12s infinite; }
.tfs-4 .tfs-dots span:nth-child(3) { animation: tfs-d4-3 12s infinite; }
.tfs-4 .tfs-dots span:nth-child(4) { animation: tfs-d4-4 12s infinite; }

@keyframes tfs-d4-1 { 0%, 21% { background: rgba(255,255,255,0.95); } 25%, 96% { background: rgba(255,255,255,0.4); } 100% { background: rgba(255,255,255,0.95); } }
@keyframes tfs-d4-2 { 0%, 21% { background: rgba(255,255,255,0.4); } 25%, 46% { background: rgba(255,255,255,0.95); } 50%, 100% { background: rgba(255,255,255,0.4); } }
@keyframes tfs-d4-3 { 0%, 46% { background: rgba(255,255,255,0.4); } 50%, 71% { background: rgba(255,255,255,0.95); } 75%, 100% { background: rgba(255,255,255,0.4); } }
@keyframes tfs-d4-4 { 0%, 71% { background: rgba(255,255,255,0.4); } 75%, 96% { background: rgba(255,255,255,0.95); } 100% { background: rgba(255,255,255,0.4); } }

.tfs-5 .tfs-dots span:nth-child(1) { animation: tfs-d5-1 15s infinite; }
.tfs-5 .tfs-dots span:nth-child(2) { animation: tfs-d5-2 15s infinite; }
.tfs-5 .tfs-dots span:nth-child(3) { animation: tfs-d5-3 15s infinite; }
.tfs-5 .tfs-dots span:nth-child(4) { animation: tfs-d5-4 15s infinite; }
.tfs-5 .tfs-dots span:nth-child(5) { animation: tfs-d5-5 15s infinite; }

@keyframes tfs-d5-1 { 0%, 16% { background: rgba(255,255,255,0.95); } 20%, 96% { background: rgba(255,255,255,0.4); } 100% { background: rgba(255,255,255,0.95); } }
@keyframes tfs-d5-2 { 0%, 16% { background: rgba(255,255,255,0.4); } 20%, 36% { background: rgba(255,255,255,0.95); } 40%, 100% { background: rgba(255,255,255,0.4); } }
@keyframes tfs-d5-3 { 0%, 36% { background: rgba(255,255,255,0.4); } 40%, 56% { background: rgba(255,255,255,0.95); } 60%, 100% { background: rgba(255,255,255,0.4); } }
@keyframes tfs-d5-4 { 0%, 56% { background: rgba(255,255,255,0.4); } 60%, 76% { background: rgba(255,255,255,0.95); } 80%, 100% { background: rgba(255,255,255,0.4); } }
@keyframes tfs-d5-5 { 0%, 76% { background: rgba(255,255,255,0.4); } 80%, 96% { background: rgba(255,255,255,0.95); } 100% { background: rgba(255,255,255,0.4); } }

/* ---------- Part 2: layout (replaces WPBakery's grid) ---------- */

/* Rows and columns: 15px gutters, same breakpoint (768px) as WPBakery's vc_col-sm-*. */
.tfs-programs .tfs-row {
    margin-left: -15px;
    margin-right: -15px;
}

.tfs-programs .tfs-row::before,
.tfs-programs .tfs-row::after,
.tfs-programs .tfs-col-inner::before,
.tfs-programs .tfs-col-inner::after {
    content: " ";
    display: table;
}

.tfs-programs .tfs-row::after,
.tfs-programs .tfs-col-inner::after {
    clear: both;
}

.tfs-programs .tfs-col {
    position: relative;
    min-height: 1px;
    width: 100%;
    box-sizing: border-box;
}

.tfs-programs .tfs-col-inner {
    box-sizing: border-box;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .tfs-programs .tfs-col { float: left; }
    .tfs-programs .tfs-col-1-2 { width: 50%; }
    .tfs-programs .tfs-col-1-3 { width: 33.33333333%; }
    .tfs-programs .tfs-col-2-3 { width: 66.66666667%; }
    .tfs-programs .tfs-col-1-4 { width: 25%; }
    .tfs-programs .tfs-col-1-6 { width: 16.66666667%; }
}

/* Flex rows: logo row (content at top) and pricing row (equal height, content centred). */
.tfs-programs .tfs-row-flex {
    display: flex;
    flex-wrap: wrap;
}

.tfs-programs .tfs-row-flex::before,
.tfs-programs .tfs-row-flex::after {
    display: none;
}

.tfs-programs .tfs-row-flex > .tfs-col {
    display: flex;
}

.tfs-programs .tfs-row-flex > .tfs-col > .tfs-col-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tfs-programs .tfs-row-middle > .tfs-col > .tfs-col-inner {
    justify-content: center;
}

/* Bands: full-width sections. Columns directly inside a band, and in the row right
   after one, get 35px top padding (WPBakery's "row has fill" spacing). */
.tfs-programs .tfs-band > .tfs-col > .tfs-col-inner,
.tfs-programs .tfs-band + .tfs-row > .tfs-col > .tfs-col-inner {
    padding-top: 35px;
}

/* Dark bands paint edge to edge without causing horizontal scroll. */
.tfs-programs .tfs-band-dark {
    background: #262626;
    box-shadow: 0 0 0 100vmax #262626;
    clip-path: inset(0 -100vmax);
}

.tfs-programs .tfs-pad-10 { padding-top: 10px; padding-bottom: 10px; }
.tfs-programs .tfs-pad-30 { padding-top: 30px; padding-bottom: 30px; }
.tfs-programs .tfs-pad-50 { padding-top: 50px; padding-bottom: 50px; }
.tfs-programs .tfs-pad-top-50 { padding-top: 50px; }
.tfs-programs .tfs-pad-60-50 { padding-top: 60px; padding-bottom: 50px; }

/* Content blocks: 35px gap below each text block, none below raw blocks (galleries, logo,
   price boxes), and the last child of a text block has no bottom margin. */
.tfs-programs .tfs-el {
    margin-bottom: 35px;
}

.tfs-programs .tfs-raw {
    margin-bottom: 0;
}

.tfs-programs .tfs-text :last-child,
.tfs-programs .tfs-text p:last-child {
    margin-bottom: 0;
}

.tfs-programs .tfs-image {
    margin-bottom: 0;
    text-align: left;
}

.tfs-programs .tfs-image figure {
    display: inline-block;
    margin: 0;
    max-width: 100%;
    vertical-align: top;
}

.tfs-programs .tfs-image img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
}

.tfs-programs .tfs-space-22 { height: 22px; }
.tfs-programs .tfs-space-32 { height: 32px; }
.tfs-programs .tfs-gap-70 { height: 70px; }

.tfs-programs .tfs-divider {
    padding-top: 35px;
}

/* ---------- Part 3: typography (values from the old inline styles) ---------- */

.tfs-programs .tfs-logo {
    margin: 0 auto;
    display: block;
}

.tfs-programs .tfs-band-title,
.tfs-programs .tfs-band-subtitle {
    color: #fff;
    text-align: center;
    margin-top: 0;
    margin-bottom: .625rem;
}

.tfs-programs .tfs-band-title {
    font-size: 42px;
}

.tfs-programs .tfs-band-subtitle {
    font-size: 24px;
}

.tfs-programs .tfs-overview-title {
    font-size: 38px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    margin: 0;
}

.tfs-programs .tfs-band-note {
    text-align: center;
    color: #fff;
    margin: 0;
    text-transform: inherit;
}

.tfs-programs .tfs-band-note-gap {
    margin-top: 20px;
}

.tfs-programs .tfs-track-title {
    font-size: 32px;
    line-height: 32px;
    margin: 0;
}

.tfs-programs .tfs-track-hours {
    font-size: 20px;
    line-height: 42px;
    margin: 0;
}

.tfs-programs .tfs-class-title {
    font-size: 42px;
    line-height: 60px;
    margin: 0;
}

.tfs-programs .tfs-class-time {
    font-size: 24px;
    line-height: 48px;
    margin: 0;
}

.tfs-programs .tfs-project-title {
    font-size: 1.5em;
    margin: 0;
}

.tfs-programs .tfs-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.tfs-programs .tfs-schedule > div {
    flex: 1;
    min-width: 250px;
    text-align: left;
}

.tfs-programs .tfs-center {
    text-align: center;
}

.tfs-programs .tfs-price-title {
    margin: 0 0 20px;
}

.tfs-programs .tfs-price {
    text-align: center;
    margin: 20px 0;
}

.tfs-programs .tfs-price-cta {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.tfs-programs .tfs-faq-heading {
    padding-bottom: 50px;
}

.tfs-programs .tfs-faq-heading h3 {
    text-align: center;
    margin-top: 0;
}

.tfs-programs .tfs-faq-aside {
    margin-bottom: 30px;
}