/* ============ Muscle Inc — CANTERA ============================================
   Dark, monumental, no boxes. Structure comes from 1px hairlines, wide margins
   and a brutal jump in type size — never from borders or filled panels.

   Palette and type match the brand sheets, the printed menus and the social
   templates exactly, so the site and the counter cards read as one system.
   ============================================================================ */

:root {
    /* ground and ink */
    --mi-basalt: #1A1917;   /* the page */
    --mi-raised: #211F1D;   /* barely-lifted surface, used sparingly */
    --mi-bone: #EDE7DC;     /* headlines and body text */
    --mi-sand: #D9C7A7;     /* the only accent — labels, links, numbers */
    --mi-mid: #A39C90;      /* secondary copy */
    --mi-ash: #7A756C;      /* small print */
    --mi-rule: #3A3833;     /* every dividing line, 1px, no exceptions */

    --mi-display: "Archivo Black", "Arial Black", Impact, sans-serif;
    --mi-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

    --mi-max-width: 1180px;
    --mi-margin: 56px;

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--mi-basalt);
    color: var(--mi-bone);
    font-family: var(--mi-body);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mi-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.94;
    margin: 0 0 0.4em 0;
    text-wrap: balance;
}

h1:focus {
    outline: none;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--mi-sand);
    color: var(--mi-basalt);
}

:focus-visible {
    outline: 2px solid var(--mi-sand);
    outline-offset: 3px;
}

/* ---------- shared section layout ---------- */

.mi-section {
    max-width: var(--mi-max-width);
    margin: 0 auto;
    padding: 128px var(--mi-margin);
    border-top: 1px solid var(--mi-rule);
    scroll-margin-top: 52px;
}

.mi-hero + .mi-section {
    border-top: none;
}

.mi-eyebrow {
    font-family: var(--mi-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--mi-sand);
    font-size: 0.78rem;
    margin-bottom: 1.1rem;
}

.mi-section h2 {
    font-size: clamp(2.6rem, 6vw, 4.5rem);
}

.mi-intro {
    max-width: 620px;
    color: var(--mi-mid);
    font-size: 1.15rem;
    line-height: 1.65;
}

.mi-body {
    max-width: 620px;
    line-height: 1.75;
    font-size: 1.05rem;
    color: var(--mi-mid);
}

@media (max-width: 700px) {
    :root { --mi-margin: 24px; }

    .mi-section {
        padding: 80px var(--mi-margin);
    }
}

/* ---------- app bar / nav ---------- */

.mi-appbar {
    background-color: var(--mi-basalt) !important;
    color: var(--mi-bone) !important;
    border-bottom: 1px solid var(--mi-rule);
    padding: 0 var(--mi-margin) !important;
}

.mi-brand {
    font-family: var(--mi-display);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.mi-nav {
    display: none;
    gap: 34px;
    align-items: center;
}

.mi-nav a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    line-height: 1;
    color: var(--mi-mid);
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mi-nav a:hover {
    color: var(--mi-sand);
    border-color: var(--mi-sand);
}

.mi-nav-divider {
    width: 1px;
    height: 14px;
    background: var(--mi-rule);
}

.mi-lang-sep {
    font-size: 0.76rem;
    color: var(--mi-ash);
}

.mi-flag {
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 6px;
}

.mi-menu-btn {
    margin-left: 8px;
}

.mi-drawer {
    background-color: var(--mi-basalt) !important;
    border-left: 1px solid var(--mi-rule);
}

.mi-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 24px var(--mi-margin);
}

.mi-drawer-links a {
    font-family: var(--mi-display);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid var(--mi-rule);
}

.mi-drawer-lang {
    display: flex;
    gap: 8px;
    padding: 24px var(--mi-margin);
    font-weight: 600;
    color: var(--mi-mid);
}

@media (min-width: 900px) {
    .mi-nav {
        display: flex;
    }

    .mi-menu-btn {
        display: none;
    }
}

/* ---------- hero ---------- */

.mi-hero {
    position: relative;
    height: 100svh;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-top: none;
    background: var(--mi-basalt);
}

.mi-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* An even darkening toward basalt, not a gradient scrim. The photograph is
   pulled into the palette so the type sits on quiet ground — the same
   treatment the social templates use. */
.mi-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--mi-basalt);
    opacity: 0.62;
}

.mi-hero-content {
    position: relative;
    z-index: 1;
    color: var(--mi-bone);
    padding: 0 var(--mi-margin) 112px;
    max-width: var(--mi-max-width);
    margin: 0 auto;
    width: 100%;
}

.mi-hero-title {
    font-size: clamp(3.2rem, 12vw, 9rem);
    line-height: 0.9;
    margin-bottom: 0.3em;
}

.mi-hero-tagline {
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    font-weight: 500;
    margin: 0 0 0.5em 0;
    max-width: 620px;
}

.mi-hero-subtagline {
    font-size: 1rem;
    color: var(--mi-mid);
    max-width: 460px;
    margin: 0;
    line-height: 1.65;
}

.mi-scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.mi-scroll-cue span {
    display: block;
    width: 1px;
    height: 44px;
    background: var(--mi-sand);
    animation: mi-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes mi-scroll-bounce {
    0%, 100% { transform: scaleY(1); opacity: 0.35; }
    50% { transform: scaleY(1.35); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mi-scroll-cue span { animation: none; opacity: 0.7; }
    html { scroll-behavior: auto; }
}

/* ---------- about ---------- */

.mi-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.mi-about-media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* No frames. Cantera never puts a border round a photograph. */
.mi-about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) brightness(0.82) contrast(1.06);
}

.mi-about-img-2 {
    margin-top: 56px;
}

.mi-quote {
    font-family: var(--mi-display);
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--mi-bone);
    border-left: 3px solid var(--mi-sand);
    padding-left: 20px;
    margin-top: 2em;
    text-transform: none;
    max-width: 520px;
}

@media (max-width: 900px) {
    .mi-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mi-about-img-2 {
        margin-top: 0;
    }
}

/* ---------- classes / programas ---------- */

.mi-classes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 48px;
    margin-top: 72px;
}

/* Hairline above each block instead of a box around it. */
.mi-class-card {
    background: none;
    border: none;
    border-top: 1px solid var(--mi-rule);
    padding: 28px 0 0 0;
}

.mi-class-index {
    display: block;
    font-family: var(--mi-display);
    color: var(--mi-sand);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    margin-bottom: 1.4em;
}

.mi-class-card h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5em;
}

.mi-class-card p {
    color: var(--mi-mid);
    line-height: 1.7;
    margin: 0;
    font-size: 0.98rem;
}

.mi-hours {
    margin-top: 88px;
    border-top: 1px solid var(--mi-rule);
    padding-top: 32px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px 48px;
}

.mi-hours h4 {
    font-size: 0.78rem;
    font-family: var(--mi-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--mi-sand);
    margin: 0;
}

.mi-hours-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 40px;
    row-gap: 0;
}

.mi-hours-row {
    display: contents;
}

.mi-hours-row dt,
.mi-hours-row dd {
    margin: 0;
    padding: 12px 0;
    font-size: 1.05rem;
    line-height: 1.5;
    border-top: 1px solid var(--mi-rule);
}

.mi-hours-row:first-child dt,
.mi-hours-row:first-child dd {
    border-top: none;
    padding-top: 0;
}

.mi-hours-row dt {
    color: var(--mi-bone);
    font-weight: 500;
}

.mi-hours-row dd {
    color: var(--mi-mid);
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
}

@media (max-width: 900px) {
    .mi-classes-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mi-class-card {
        margin-top: 40px;
    }

    .mi-hours {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 520px) {
    .mi-hours-list {
        grid-template-columns: 1fr;
    }

    .mi-hours-row dt {
        padding-bottom: 2px;
    }

    .mi-hours-row dd {
        border-top: none;
        padding-top: 0;
        flex-direction: column;
        gap: 2px;
    }
}

/* ---------- gallery ---------- */

.mi-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 72px;
}

.mi-gallery-item {
    padding: 0;
    border: none;
    background: var(--mi-raised);
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
}

.mi-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) brightness(0.78) contrast(1.06);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.mi-gallery-item:hover img {
    transform: scale(1.04);
    filter: grayscale(0.2) brightness(0.95) contrast(1.06);
}

@media (max-width: 700px) {
    .mi-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mi-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(26, 25, 23, 0.97);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.mi-lightbox-close, .mi-lightbox-prev, .mi-lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: var(--mi-bone);
    font-size: 2.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 12px;
    transition: color 0.15s ease;
}

.mi-lightbox-close:hover, .mi-lightbox-prev:hover, .mi-lightbox-next:hover {
    color: var(--mi-sand);
}

.mi-lightbox-close {
    top: 16px;
    right: 24px;
}

.mi-lightbox-prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.mi-lightbox-next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- contact ---------- */

.mi-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
}

.mi-contact-list {
    margin: 40px 0 0 0;
    display: grid;
    gap: 0;
}

.mi-contact-list > div {
    border-top: 1px solid var(--mi-rule);
    padding: 20px 0;
}

.mi-contact-list dt {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--mi-sand);
    margin-bottom: 10px;
}

.mi-contact-list dd {
    margin: 0;
    font-size: 1.05rem;
    color: var(--mi-bone);
    line-height: 1.6;
}

/* The hours table reused inside the contact card: tighter rows, no
   rules, since the card already has its own dividers. */
.mi-contact-list .mi-hours-list {
    column-gap: 24px;
}

.mi-contact-list .mi-hours-row dt,
.mi-contact-list .mi-hours-row dd {
    border-top: none;
    padding: 0;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.05rem;
    margin: 0;
}

.mi-contact-list .mi-hours-row dt {
    color: var(--mi-bone);
    font-weight: 500;
}

.mi-contact-list .mi-hours-row dd {
    color: var(--mi-mid);
    gap: 0 20px;
}

.mi-contact-list dd a {
    text-decoration: none;
    border-bottom: 1px solid var(--mi-rule);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.mi-contact-list dd a:hover {
    color: var(--mi-sand);
    border-color: var(--mi-sand);
}

.mi-contact-map {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: none;
    border-top: 1px solid var(--mi-rule);
    padding-top: 20px;
}

/* Drawn by wwwroot/js/map.js with the Maps JavaScript API, which has a real
   dark colour scheme. The panel keeps the raised tone so the section still
   reads correctly while the tiles load, or if the key is rejected. */
.mi-map-canvas {
    width: 100%;
    flex: 1;
    min-height: 320px;
    background: var(--mi-raised);
}

/* Fallback only, used when no API key is configured. Google's share-embed is a
   bright white map with no dark option, so it is inverted and hue-rotated into
   the palette; the grayscale knocks out residual colour so nothing competes
   with sand. It is a filter over someone else's tiles - if Google changes them,
   this is the line to revisit. Configure GoogleMaps:ApiKey to retire it. */
.mi-map-embed {
    width: 100%;
    flex: 1;
    min-height: 320px;
    border: none;
    display: block;
    filter: invert(0.92) hue-rotate(180deg) grayscale(0.7) contrast(0.9) brightness(0.95);
}

.mi-map-directions {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mi-mid);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--mi-rule);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.mi-map-directions:hover {
    color: var(--mi-sand);
    border-color: var(--mi-sand);
}

@media (max-width: 900px) {
    .mi-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ---------- footer ---------- */

.mi-footer {
    background: var(--mi-basalt);
    color: var(--mi-bone);
    text-align: left;
    padding: 72px var(--mi-margin) 48px;
    border-top: 1px solid var(--mi-rule);
    max-width: var(--mi-max-width);
    margin: 0 auto;
}

.mi-footer-brand {
    font-family: var(--mi-display);
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.mi-footer-tagline {
    color: var(--mi-mid);
    margin: 0.6em 0 2em;
    font-size: 1rem;
}

.mi-footer-socials {
    display: flex;
    gap: 28px;
    justify-content: flex-start;
    margin-bottom: 40px;
}

.mi-footer-socials a {
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    color: var(--mi-sand);
    border-bottom: 1px solid var(--mi-rule);
    padding-bottom: 3px;
    transition: border-color 0.15s ease;
}

.mi-footer-socials a:hover {
    border-color: var(--mi-sand);
}

.mi-footer-rights {
    color: var(--mi-ash);
    font-size: 0.78rem;
    margin: 0;
    border-top: 1px solid var(--mi-rule);
    padding-top: 24px;
}

/* ============ framework defaults (kept from template) ============ */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}