/* Front page only. Brand custom properties (--brand-accent etc.) come
   from style.css's :root, already loaded sitewide. Typography here is
   intentionally Oswald/Muli (matching the GymLife reference template)
   rather than the sitewide Bricolage/Plus Jakarta pairing. */

.fc-hero,
.fc-hero * {
    font-family: "Muli", sans-serif;
}
.fc-hero h1,
.fc-hero h2,
.fc-hero h3,
.fc-hero h4,
.fc-hero h5,
.fc-section h2,
.fc-section h3,
.fc-section h4,
.fc-section h5,
.fc-banner h2,
.fc-nav .navbar-brand,
.fc-hero .fc-nav .wp-block-site-title,
.fc-plan h2,
.fc-plan h3 {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.fc-eyebrow {
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--brand-ink);
    margin-bottom: .5rem;
}
/* Hero and other dark-background sections keep the bright accent — everywhere
   else (section titles on the white/tint page body) needs ink for contrast. */
.fc-hero .fc-eyebrow,
.fc-plan--featured .fc-eyebrow {
    color: var(--brand-accent);
}

.fc-btn.wp-block-button__link {
    background: var(--brand-accent);
    color: var(--brand-ink);
    border-radius: 999px;
    font-weight: 700;
    padding: .9rem 1.8rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.fc-btn.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 226, 76, .35);
}
.fc-btn--ghost.wp-block-button__link {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.6);
}
.fc-btn--ghost.wp-block-button__link:hover {
    background: var(--brand-ink);
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

/* Hero */
.fc-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
}
.fc-hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fc-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .8s ease;
}
.fc-hero-slide.is-active { opacity: 1; }
.fc-hero-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6,20,20,.92) 30%, rgba(6,20,20,.45));
}
.fc-hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(6,20,20,.35);
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.fc-hero-arrow:hover { background: var(--brand-accent); color: var(--brand-ink); border-color: var(--brand-accent); }
.fc-hero-arrow--prev { left: clamp(1rem, 4vw, 3rem); }
.fc-hero-arrow--next { right: clamp(1rem, 4vw, 3rem); }

/* Nav sits as an overlay bar on top of the hero image */
.fc-hero .fc-nav {
    position: relative;
    z-index: 2;
    padding: 1.5rem clamp(1.25rem, 5vw, 4rem);
    background: transparent;
}
.fc-hero .fc-nav .wp-block-site-title,
.fc-hero .fc-nav .wp-block-site-title a {
    color: #fff;
    font-size: 1.4rem;
}

.fc-hero > .wp-block-group:not(.fc-nav) {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 640px;
    padding: 2rem clamp(1.25rem, 5vw, 4rem) 4rem;
    animation: fc-fade-up .8s ease both;
}
.fc-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1.1; font-weight: 700; }
.fc-hero h1 strong { color: var(--brand-accent); }
.fc-hero p { font-size: 1.1rem; color: rgba(255,255,255,.85); font-family: "Muli", sans-serif; }

/* Generic section rhythm */
.fc-section { padding: 5rem 0; font-family: "Muli", sans-serif; }
.fc-section .fc-section-title { text-align: center; max-width: 640px; margin: 0 auto 3rem; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.fc-section-title h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }

/* Why choose us — asymmetric bento instead of 4 identical cards in a row:
   the first reason gets a tall, dark, featured tile; the other three stack
   beside it at normal size. Same content, a composition with a focal point
   instead of four boxes of equal visual weight. */
.fc-why-grid.wp-block-columns {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1.25rem, 5vw, 4rem);
}
.fc-why-grid > .wp-block-column:first-child { grid-row: 1 / 3; }
.fc-why-grid > .wp-block-column:first-child .fc-why-card {
    height: 100%;
    background: var(--brand-ink);
    color: #fff;
    align-items: flex-start;
    text-align: left;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.fc-why-grid > .wp-block-column:first-child .fc-why-card svg {
    background: rgba(255, 226, 76, .15);
    stroke: var(--brand-accent);
}
.fc-why-grid > .wp-block-column:first-child .fc-why-card h4 { font-size: 1.6rem; }
.fc-why-grid > .wp-block-column:first-child .fc-why-card p { color: rgba(255, 255, 255, .75); }
.fc-why-card {
    background: #fff;
    border-radius: 6px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(6,20,20,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.fc-why-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(6,20,20,.1); }
.fc-why-card svg {
    width: 34px;
    height: 34px;
    stroke: var(--brand-ink);
    margin-bottom: 1rem;
    padding: 14px;
    box-sizing: content-box;
    border-radius: 50%;
    background: var(--brand-tint);
}
.fc-why-card h4 { font-size: 1.1rem; }

/* Classes */
.fc-classes-grid.wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.fc-class-card { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; }
.fc-class-card figure { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.fc-class-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fc-class-card:hover img { transform: scale(1.08); }
.fc-class-card .fc-class-label {
    position: absolute; inset: auto 0 0 0; padding: 1.5rem;
    background: linear-gradient(0deg, rgba(6,20,20,.9), transparent);
    color: #fff;
}
.fc-class-card .fc-class-label span { color: var(--brand-accent); font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .1em; font-size: .75rem; text-transform: uppercase; }
.fc-class-card h5 { font-size: 1.15rem; }

/* Banner CTA */
.fc-banner {
    background-size: cover; background-position: center;
    position: relative; padding: 6rem 0; text-align: center; color: #fff;
    font-family: "Muli", sans-serif;
}
.fc-banner::before { content: ""; position: absolute; inset: 0; background: rgba(6,20,20,.8); }
.fc-banner .wp-block-group { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.fc-banner h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
/* wp:buttons is a flex container (justify-content: flex-start by default) —
   text-align: center on the section doesn't reach it, so the button sat
   left-aligned under centered heading/paragraph text. */
.fc-banner .wp-block-buttons { justify-content: center; }

/* Pricing */
.fc-pricing-grid.wp-block-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: stretch; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.fc-plan { background: #fff; border-radius: 6px; padding: 2.5rem 2rem; text-align: center; border: 2px solid var(--brand-tint); transition: transform .25s ease; }
.fc-plan .wp-block-buttons { justify-content: center; }
.fc-plan:hover { transform: translateY(-6px); }
.fc-plan--featured { border-color: var(--brand-accent); background: var(--brand-ink); color: #fff; }
.fc-plan h2 { color: var(--brand-ink); font-size: 2.2rem; }
.fc-plan--featured h2 { color: var(--brand-accent); }
.fc-plan ul { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; font-family: "Muli", sans-serif; }
.fc-plan li { padding: .4rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.fc-plan--featured li { border-bottom-color: rgba(255,255,255,.12); }

/* Gallery */
.fc-gallery-grid.wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.fc-gallery-item { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 1/1; position: relative; }
.fc-gallery-item a { position: absolute; inset: 0; }
.fc-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fc-gallery-item::after {
    content: "+";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff; background: rgba(255,226,76,0);
    opacity: 0; transition: opacity .3s ease, background .3s ease;
}
.fc-gallery-item:hover::after { opacity: 1; background: rgba(6,20,20,.55); }
.fc-gallery-item:hover img { transform: scale(1.1); }

/* Team */
.fc-team-grid.wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.fc-team-card { text-align: center; }
.fc-team-card .fc-team-photo { border-radius: 6px; overflow: hidden; aspect-ratio: 3/4; margin-bottom: 1rem; }
.fc-team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fc-team-card:hover img { transform: scale(1.06); }
.fc-team-card h4 { font-size: 1.1rem; }
.fc-team-card .fc-role { color: var(--brand-ink); font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }

/* Contact */
.fc-contact-grid.wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; background: var(--brand-ink); border-radius: 6px; padding: 2.5rem; color: #fff; margin-left: clamp(1.25rem, 5vw, 4rem); margin-right: clamp(1.25rem, 5vw, 4rem); font-family: "Muli", sans-serif; }
.fc-contact-item { text-align: center; }
.fc-contact-item svg { width: 28px; height: 28px; stroke: var(--brand-accent); margin-bottom: .75rem; }

/* Footer */
.fc-footer { background: var(--brand-ink); color: rgba(255,255,255,.75); padding: 4rem clamp(1.25rem, 5vw, 4rem) 1.5rem; font-family: "Muli", sans-serif; }
.fc-footer h4 { color: #fff; margin-bottom: 1rem; font-size: 1rem; }
.fc-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.fc-footer a:hover { color: var(--brand-accent); }
.fc-footer .fc-copyright { text-align: center; border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding-top: 1.5rem; font-size: .85rem; }

/* Scroll reveal (see theme.js) */
.fc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fc-reveal.is-visible { opacity: 1; transform: none; }

@keyframes fc-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-hero > .wp-block-group:not(.fc-nav) { animation: none; }
    .fc-reveal { opacity: 1; transform: none; transition: none; }
    .fc-hero-slide { transition: none; }
}

@media (max-width: 991px) {
    .fc-why-grid.wp-block-columns,
    .fc-classes-grid.wp-block-columns,
    .fc-pricing-grid.wp-block-columns,
    .fc-team-grid.wp-block-columns,
    .fc-contact-grid.wp-block-columns { grid-template-columns: repeat(2, 1fr); }
    .fc-gallery-grid.wp-block-columns { grid-template-columns: repeat(2, 1fr); }
    /* The featured tile's 2-row span only makes sense in the 3-col desktop
       layout — let it fall back to a normal (still visually distinct via
       its own color treatment) single cell here. */
    .fc-why-grid > .wp-block-column:first-child { grid-row: auto; }
}

@media (max-width: 575px) {
    .fc-why-grid.wp-block-columns,
    .fc-classes-grid.wp-block-columns,
    .fc-team-grid.wp-block-columns,
    .fc-contact-grid.wp-block-columns,
    .fc-gallery-grid.wp-block-columns { grid-template-columns: 1fr; }
    .fc-pricing-grid.wp-block-columns { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .fc-pricing-grid .fc-plan { padding: 1.5rem 1rem; }
    .fc-pricing-grid .fc-plan h2 { font-size: 1.4rem; }
    .fc-hero { min-height: 76vh; }
    .fc-hero-arrow { display: none; }
}