/* BARRE Teacher Training — scoped stylesheet.
   Everything lives under the .btt namespace so theme styles never leak in
   and these styles never leak out. */

.btt {
    --btt-green: #25624F;
    --btt-blush: #F5DFDB;
    --btt-ink: #182520;
    --btt-on-green: #F2FBF7;

    font-family: 'Montserrat', sans-serif;
    color: var(--btt-text, var(--btt-ink));
    line-height: 1.5;
}

.btt *, .btt *::before, .btt *::after { box-sizing: border-box; }

.btt-wrap {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.btt-h2 {
    font-family: 'Bodoni Moda', serif;
    font-variation-settings: 'opsz' 11;
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 2rem;
    line-height: 1.2;
    color: var(--btt-text, var(--btt-ink));
}
/* Headings on green sections are white — the theme's dark heading
   colour must never win over the section text colour. An editor-picked
   text colour (--btt-text) wins over both. */
.btt-hero .btt-hero-title,
.btt-gali .btt-h2,
.btt-investment .btt-h2,
.btt-apply .btt-h2,
.btt-contact .btt-h2 { color: var(--btt-text, var(--btt-on-green)); }
.btt-gali .btt-h2-blush { color: var(--btt-text, var(--btt-blush)); }
@media (min-width: 768px) {
    .btt-h2 { font-size: 2.25rem; }
}

.btt-prose { max-width: 56rem; font-size: 1.125rem; line-height: 1.625; }
.btt-prose p { margin: 0 0 1rem; }

/* ---------- Buttons ---------- */

.btt-btn {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.btt-btn:hover { opacity: 0.9; }
.btt-btn-blush { background: var(--btt-blush); color: var(--btt-green); }
.btt-btn-green { background: var(--btt-green); color: var(--btt-on-green); padding: 1rem 2.5rem; }

/* ---------- Hero ---------- */

.btt-hero { background: var(--btt-green); color: var(--btt-on-green); }
.btt-hero-inner { padding-top: 2.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) {
    .btt-hero-inner { padding-top: 3.5rem; padding-bottom: 5rem; }
}

.btt-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}
.btt-hero-kicker {
    color: var(--btt-blush);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.25;
    margin: 0;
}
@media (min-width: 768px) { .btt-hero-kicker { font-size: 1.5rem; } }

.btt-hero-grid { margin-top: 3rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
    .btt-hero-grid { grid-template-columns: 1.4fr 1fr; align-items: end; }
}

.btt-hero-title {
    font-family: 'Bodoni Moda', serif;
    font-variation-settings: 'opsz' 11;
    font-size: 3.75rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    line-height: 0.9;
    margin: 0;
}
@media (min-width: 768px) { .btt-hero-title { font-size: 6rem; } }
.btt-hero-subtitle {
    display: block;
    margin-top: 0.75rem;
    text-transform: none;
    color: var(--btt-blush);
    font-size: 3rem;
}
@media (min-width: 768px) { .btt-hero-subtitle { font-size: 3.75rem; } }

.btt-hero-meta { color: var(--btt-blush); }
.btt-hero-meta > * { margin: 0 0 1.25rem; }
.btt-hero-dates {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
}
@media (min-width: 768px) { .btt-hero-dates { font-size: 1.875rem; } }
.btt-hero-location {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    letter-spacing: 0.025em;
}
.btt-hero-meta svg { flex-shrink: 0; }

/* ---------- Hero image (full width, natural aspect ratio) ---------- */

.btt-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 50% 35%;
    margin: 0;
}

/* ---------- Intro ---------- */

.btt-intro { background: var(--btt-surface, #ffffff); }
.btt-intro .btt-wrap { padding-top: 5rem; padding-bottom: 5rem; }

/* ---------- Meet Gali / Investment (green sections) ---------- */

.btt-gali, .btt-investment, .btt-apply, .btt-contact {
    background: var(--btt-green);
    color: var(--btt-on-green);
}
.btt-gali .btt-wrap, .btt-investment .btt-wrap { padding-top: 5rem; padding-bottom: 5rem; }
.btt-apply .btt-wrap { padding-bottom: 5rem; }
.btt-contact .btt-wrap { padding-bottom: 4rem; }

.btt-gali-grid, .btt-investment-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 768px) {
    .btt-gali-grid, .btt-investment-grid { grid-template-columns: 1fr 1fr; }
}

.btt-round-photo {
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 9999px;
    margin: 0 auto;
    display: block;
}

.btt-h2-blush { color: var(--btt-blush); text-transform: none; }
.btt-h2-blush .btt-upper { text-transform: uppercase; }
.btt-h2-em { font-weight: 800; font-style: italic; }

.btt-ig {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    color: var(--btt-on-green);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.btt-ig:hover { text-decoration: underline; }

/* ---------- Blush sections ---------- */

.btt-blush-section { background: var(--btt-blush); }
.btt-blush-section .btt-wrap { padding-top: 5rem; padding-bottom: 5rem; }

/* Who + Learn: one blush band, two columns on desktop. */
.btt-who-learn-grid { display: grid; gap: 3.5rem; }
@media (min-width: 768px) {
    .btt-who-learn-grid { grid-template-columns: 1fr 1fr; }
}

.btt-who-intro { font-size: 1.125rem; margin: 0 0 0.5rem; }
.btt-who-list { list-style: none; margin: 0; padding: 0; }
.btt-who-item { font-size: 1.125rem; font-weight: 600; padding: 0.125rem 0; }
.btt-who-marker { color: var(--btt-green); }
.btt-who-outro { font-size: 1.125rem; line-height: 1.625; margin: 2rem 0 0; max-width: 42rem; }

.btt-learn-list { list-style: none; margin: 0; padding: 0; }
.btt-learn-item { font-size: 1.125rem; padding: 0.125rem 0; }

/* ---------- Course structure ---------- */

.btt-structure { background: var(--btt-surface, #ffffff); }
.btt-structure .btt-wrap { padding-top: 5rem; padding-bottom: 5rem; }
.btt-structure-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .btt-structure-grid { grid-template-columns: 1fr 1fr; } }

.btt-structure-item { display: flex; gap: 1.5rem; }
.btt-structure-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--btt-blush);
    color: var(--btt-ink);
}
.btt-structure-label {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
    color: var(--btt-ink);
}
.btt-structure-text { font-size: 1.25rem; margin: 0; }

/* ---------- Price badges ---------- */

.btt-price-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.btt-price-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 11rem;
    height: 11rem;
    border-radius: 9999px;
    background: var(--btt-blush);
    color: var(--btt-green);
    text-align: center;
}
.btt-price-label { padding: 0 1.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.btt-price-value { font-size: 2.25rem; font-weight: 700; }
.btt-price-note { font-size: 1.125rem; }

/* ---------- Application ---------- */

.btt-apply-label { font-weight: 700; text-transform: uppercase; margin: 1.5rem 0 0.25rem; }
.btt-apply-link { color: var(--btt-on-green); font-size: 1.125rem; text-decoration: underline; }

/* ---------- Contact ---------- */

.btt-contact-rule { border: 0; border-top: 2px solid var(--btt-blush); margin: 0 0 3rem; }
.btt-contact-heading { text-align: center; }
.btt-contact-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.125rem;
}
@media (min-width: 768px) {
    .btt-contact-row { flex-direction: row; justify-content: center; gap: 4rem; }
}
.btt-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--btt-on-green);
    text-decoration: none;
}
.btt-contact-link:hover { text-decoration: underline; }

/* ---------- Closing ---------- */

.btt-closing .btt-wrap { text-align: center; }
.btt-closing-quote {
    font-family: 'Bodoni Moda', serif;
    font-variation-settings: 'opsz' 11;
    font-style: italic;
    font-size: 1.875rem;
    line-height: 1.375;
    margin: 0 0 2.5rem;
}
@media (min-width: 768px) { .btt-closing-quote { font-size: 2.25rem; } }

/* ---------- UX Builder preview: never hide content ---------- */

.ux-builder-iframe .btt, .ux-builder-iframe .btt * { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
    .btt * { transition: none !important; }
}