/* ================================================================
   AMCH RINGE — MOBILE APP PREMIUM v1.0
   Mobile-First Design System — aplica-se a TODAS as páginas
   Zero alterações em ficheiros de página individuais
   ================================================================ */

/* ---------------------------------------------------------------
   0. DESIGN TOKENS MOBILE
--------------------------------------------------------------- */
:root {
    --app-header-h-mobile: 62px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-radius-card: 18px;
    --app-radius-btn: 14px;
    --app-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --app-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --app-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------
   1. BASE — RESET & SCROLL MOBILE
--------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Elimina delay de toque em todos os elementos interativos */
a,
button,
label,
input,
select,
textarea,
[role="button"],
[tabindex] {
    touch-action: manipulation;
}

/* ---------------------------------------------------------------
   2. HEADER MOBILE — Compacto, logo + hamburger
--------------------------------------------------------------- */

/* A barra superior (header-top) está marcada com d-none d-lg-block
   no HTML — apenas reforçamos aqui para segurança */
@media (max-width: 991.98px) {
    .header-top {
        display: none !important;
    }
}

@media (max-width: 991.98px) {

    /* Força a altura do elemento #header — sobrescreve o Porto JS que define height inline */
    #header {
        height: var(--app-header-h-mobile) !important;
    }

    /* Header body: altura fixa, fundo branco com blur */
    #header .header-body {
        height: var(--app-header-h-mobile) !important;
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
        box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Row da navbar: garante altura e sem overflow */
    #header .header-body>.container>.row {
        min-height: var(--app-header-h-mobile);
        flex-wrap: nowrap;
    }

    /* Logo */
    .header-logo-link {
        text-decoration: none !important;
    }

    .header-logo-img {
        height: 46px !important;
        width: auto !important;
        max-width: 180px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Hamburger — touch target 44×44 */
    .btn.header-btn-collapse-nav {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        color: var(--color-primary, #2e895b) !important;
        font-size: 1.3rem !important;
        transition: background var(--app-transition), transform var(--app-transition) !important;
        flex-shrink: 0 !important;
    }

    .btn.header-btn-collapse-nav:active {
        background: transparent !important;
        transform: scale(0.88) !important;
    }

    /* Garante que o col de ms-auto ocupa o espaço certo */
    #header .col-auto.ms-auto {
        margin-left: auto !important;
        padding-left: 0.5rem !important;
    }
}

/* Offcanvas menu — APP style
   O offcanvas está fora do <header>, sem herança Porto. */

#offcanvasMenu {
    width: min(320px, 88vw);
    background-color: #ffffff;
}

#offcanvasMenu .offcanvas-title {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 1rem;
}

#offcanvasMenu .nav-link {
    color: #2c3e50;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.93rem;
    font-weight: 500;
    transition: all var(--app-transition);
}

#offcanvasMenu .nav-link:hover,
#offcanvasMenu .nav-link:focus {
    color: var(--color-primary, #2e895b);
    background-color: rgba(46, 137, 91, 0.08);
}

#offcanvasMenu .nav-link:active {
    background-color: rgba(46, 137, 91, 0.15);
}

#offcanvasMenu .nav.ms-3 .nav-link {
    color: #495057;
    font-size: 0.875rem;
    padding: 0.55rem 1rem;
}

#offcanvasMenu .fa-chevron-down {
    color: #8a9bb0;
}

@media (max-width: 991.98px) {
    #offcanvasMenu {
        border-radius: 20px 0 0 20px;
    }

    #offcanvasMenu .offcanvas-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    #offcanvasMenu .offcanvas-body {
        padding: 0.75rem 0.75rem 2rem;
    }
}

/* ---------------------------------------------------------------
   3. HERO SECTIONS — Compacto e centrado em mobile
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Todos os heróis: reduz min-height */
    .min-vh-60 {
        min-height: 44vh !important;
    }

    .min-vh-50 {
        min-height: 36vh !important;
    }

    .min-vh-80 {
        min-height: 56vh !important;
    }

    /* Círculos decorativos do hero — esconde em mobile */
    .rounded-circle.position-absolute[style*="300px"],
    .rounded-circle.position-absolute[style*="280px"] {
        display: none !important;
    }

    /* Hero: ícone central fica menor */
    .rounded-circle[style*="200px"][style*="height: 200px"] {
        width: 130px !important;
        height: 130px !important;
    }

    .rounded-circle[style*="200px"][style*="height: 200px"] i {
        font-size: 3rem !important;
    }

    /* Badges flutuantes do hero — reposiciona */
    .position-absolute[style*="top: -10px"] {
        top: -4px !important;
        right: -8px !important;
    }

    .position-absolute[style*="bottom: 10px"] {
        bottom: 4px !important;
        left: -16px !important;
    }

    /* Hero stats (círculos com "38 anos", "6 valências") */
    .rounded-circle[style*="150px"],
    .rounded-circle[style*="130px"],
    .rounded-circle[style*="110px"] {
        width: 90px !important;
        height: 90px !important;
    }
}

/* Oculta ondas SVG de transição hero→conteúdo em mobile/tablet.
   Combinação de dois atributos inline únicos destes divs — sem :has() */
@media (max-width: 991.98px) {
    [style*="margin-bottom: -1px"][style*="overflow: hidden"] {
        display: none !important;
    }
}

/* ---------------------------------------------------------------
   5. SECTIONS & SPACING — Mobile compacto
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Secções principais */
    .section,
    section.section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* py-5 explícito override */
    .section.py-5,
    section.py-5 {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* Container.py-5 dentro de sections */
    .section>.container.py-5,
    section>.container.py-5,
    .section>.container>.row>.col>.container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Separação entre cabeçalho e conteúdo da secção */
    .row.justify-content-center.mb-5 {
        margin-bottom: 2rem !important;
    }

    /* Reduz padding interno das secções com pb-5/pt-5 */
    .section.pt-5 {
        padding-top: 44px !important;
    }

    .section.pb-5 {
        padding-bottom: 44px !important;
    }

    /* Rows de cards — gap menor */
    .row.g-4 {
        --bs-gutter-x: 0.875rem;
        --bs-gutter-y: 0.875rem;
    }

    .row.g-3 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    /* Espaçamento entre blocos internos */
    .mb-5 {
        margin-bottom: 2rem !important;
    }

    .pb-5 {
        padding-bottom: 2rem !important;
    }

    .mt-5 {
        margin-top: 2rem !important;
    }

    .pt-5 {
        padding-top: 2rem !important;
    }
}

@media (max-width: 991.98px) {

    .section,
    section.section {
        padding-top: 52px;
        padding-bottom: 52px;
    }
}

/* ---------------------------------------------------------------
   6. CARDS — APP Style mobile
--------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .card {
        border-radius: var(--app-radius-card) !important;
    }

    .card-body {
        padding: 1.25rem !important;
    }

    /* Cards com padding p-4/p-5 inline */
    .card .p-4 {
        padding: 1.25rem !important;
    }

    .card .p-5 {
        padding: 1.5rem !important;
    }

    /* Evita hover transform em mobile (não há hover real em touch) */
    .card:hover,
    .destaque-card:hover,
    .foto-card:hover {
        transform: none !important;
        box-shadow: var(--app-shadow-card) !important;
    }

    /* Card com imagem — aspect ratio fixed */
    .card img[style*="object-fit: cover"] {
        max-height: 200px !important;
    }

    /* Timeline cards */
    .card[style*="border-radius: 18px"],
    .card[style*="border-radius: 20px"],
    .card[style*="border-radius: 25px"] {
        border-radius: var(--app-radius-card) !important;
    }
}

/* ---------------------------------------------------------------
   7. TIPOGRAFIA FLUIDA
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Escala de títulos de secção */
    .text-12 {
        font-size: clamp(1.8rem, 7vw, 3rem) !important;
    }

    .text-11 {
        font-size: clamp(1.7rem, 6.5vw, 2.75rem) !important;
    }

    .text-10 {
        font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    }

    .text-9 {
        font-size: clamp(1.45rem, 5.5vw, 2.25rem) !important;
    }

    .text-8 {
        font-size: clamp(1.3rem, 5vw, 2rem) !important;
    }

    .text-7 {
        font-size: clamp(1.15rem, 4.5vw, 1.75rem) !important;
    }

    .text-6 {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
    }

    .text-5 {
        font-size: clamp(0.95rem, 3.5vw, 1.25rem) !important;
    }

    /* Line-height mais compacto nos títulos */
    h1,
    h2,
    h3 {
        line-height: 1.25 !important;
    }

    /* Parágrafos — font ligeiramente menor */
    .text-4 {
        font-size: 0.9rem !important;
    }

    .text-3-5 {
        font-size: 0.875rem !important;
    }

    .text-3 {
        font-size: 0.825rem !important;
    }

    .line-height-8 {
        line-height: 1.7 !important;
    }

    .line-height-9 {
        line-height: 1.75 !important;
    }
}

/* ---------------------------------------------------------------
   8. FORMULÁRIOS — APP Style
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .form-control,
    .form-select {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        /* evita zoom automático iOS (min 16px) */
        border-radius: 12px !important;
        border: 1.5px solid #e2e8f0 !important;
        background: #f8fafc !important;
        -webkit-appearance: none;
    }

    .form-control:focus,
    .form-select:focus {
        background: #ffffff !important;
        border-color: var(--color-primary, #2e895b) !important;
        box-shadow: 0 0 0 3px rgba(46, 137, 91, 0.15) !important;
    }

    /* Labels dos forms */
    .form-label,
    label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.4rem !important;
    }

    /* Grupos de inputs */
    .mb-3.form-group,
    .mb-3:has(> .form-control),
    .mb-3:has(> .form-select) {
        margin-bottom: 1rem !important;
    }

    /* Textarea */
    textarea.form-control {
        min-height: 110px !important;
    }

    /* Checkbox — maior touch target */
    .form-check {
        padding-left: 2rem !important;
        min-height: 28px !important;
        display: flex !important;
        align-items: center !important;
    }

    .form-check-input {
        width: 20px !important;
        height: 20px !important;
        margin-top: 0 !important;
        margin-left: -2rem !important;
        cursor: pointer !important;
    }
}

/* ---------------------------------------------------------------
   9. BOTÕES — Touch-friendly
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Touch target mínimo 44px */
    .btn {
        min-height: 44px !important;
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        border-radius: var(--app-radius-btn) !important;
        font-size: 0.9rem !important;
        transition: all var(--app-transition) !important;
    }

    /* Botões grandes */
    .btn-lg {
        min-height: 50px !important;
        padding: 0.8rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Hero buttons — full width em mobile pequeno */
    @media (max-width: 479px) {

        .btn.btn-lg.me-2,
        .btn.btn-lg.btn-rounded {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 0.6rem !important;
        }
    }

    /* Tap feedback */
    .btn:active {
        transform: scale(0.96) !important;
        opacity: 0.9 !important;
    }
}

/* ---------------------------------------------------------------
   10. GALERIA — Scroll snap horizontal em mobile
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Galerías com .row.g-3 de fotos — scroll horizontal snapping */
    .galeria-masonry {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        scroll-padding: 1rem;
        /* Ocultar scrollbar mas manter scroll */
        scrollbar-width: none;
    }

    .galeria-masonry::-webkit-scrollbar {
        display: none;
    }

    .galeria-masonry .galeria-item {
        flex: 0 0 75vw !important;
        max-width: 75vw !important;
        scroll-snap-align: start !important;
    }

    .galeria-masonry .galeria-img {
        height: 220px !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    /* Galerías com row + col para fotos instalações */
    section .row.g-3>[class*="col-sm-6"] {
        scroll-snap-align: start;
    }
}

/* ---------------------------------------------------------------
   11. CAROUSEL — Melhor experiência touch
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Carousels de escalões / atletismo */
    .carousel {
        border-radius: var(--app-radius-card) !important;
        overflow: hidden !important;
    }

    /* Setas dos carousels — maiores */
    .carousel-control-prev,
    .carousel-control-next {
        width: 44px !important;
        height: 44px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.4) !important;
        margin: 0 8px !important;
    }
}

/* ---------------------------------------------------------------
   12. LISTAS — Melhor legibilidade
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Lista de méritos / atas / convocatórias */
    .list-unstyled>li {
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        line-height: 1.6 !important;
    }

    .list-unstyled>li:last-child {
        border-bottom: none !important;
    }

    /* Badges inline em listas */
    .list-unstyled .badge {
        flex-shrink: 0 !important;
    }
}

/* ---------------------------------------------------------------
   13. BADGES
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Badges hero — menores em mobile */
    .badge.px-4 {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    .badge.px-3 {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }
}

/* ---------------------------------------------------------------
   14. FOOTER — Compacto em mobile
--------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #footer {
        padding-bottom: 0 !important;
    }

    /* Colunas do footer empilham */
    #footer .col-lg-4,
    #footer .col-lg-3,
    #footer .col-lg-2 {
        margin-bottom: 1.75rem !important;
        text-align: center !important;
    }

    #footer .footer-contact-icon {
        margin: 0 auto 0.5rem !important;
    }

    /* Ícones sociais centrados */
    #footer .d-flex.flex-column,
    #footer .d-flex.gap-2 {
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------
   15. TWEAKS ESPECÍFICOS DE PÁGINA — via body class detection
--------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Página Desporto — Cards de escalões */
    .desporto-page .card[style*="height: 260px"] img,
    .desporto-page img[style*="height: 260px"] {
        height: 200px !important;
    }

    /* Página Desporto — Marcos históricos (2 col → 1 col) */
    .desporto-page .row.g-0 .col-md-6 {
        border-left: none !important;
        border-top: 4px solid #28a745 !important;
    }

    .desporto-page .row.g-0 .col-md-6:last-child {
        border-top-color: #20c997 !important;
    }

    /* Casa do Meio Caminho — Vídeos (ratio) */
    .casa-caminho-page .ratio,
    [class*="caminho"] .ratio {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Página Noticias — Imagem de capa */
    .noticia-detalhe img,
    .noticias-page .card-img-top {
        max-height: 220px !important;
        object-fit: cover !important;
    }

    /* Tabelas (Atas, Contas) — scroll horizontal */
    .table-responsive {
        border-radius: 12px !important;
        box-shadow: var(--app-shadow-card) !important;
    }

    table {
        font-size: 0.8rem !important;
    }

    table td,
    table th {
        padding: 0.5rem 0.625rem !important;
    }
}

/* ---------------------------------------------------------------
   16. SAFE AREAS — Notch / Dynamic Island / Gesture bar
--------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Desktop: safe-area no header-top (barra de status do ecrã inteiro) */
    @media (min-width: 992px) {
        #header .header-body {
            padding-top: env(safe-area-inset-top);
        }
    }

    /* Mobile: aumenta a altura do header para acomodar a notch/Dynamic Island */
    @media (max-width: 991.98px) {
        #header .header-body {
            height: calc(var(--app-header-h-mobile) + env(safe-area-inset-top)) !important;
            padding-top: env(safe-area-inset-top) !important;
        }
    }
}

/* ---------------------------------------------------------------
   17. SCROLL PERFORMANCE
--------------------------------------------------------------- */
/* Previne layout shifts em imagens */
img {
    max-width: 100%;
    height: auto;
}

img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* ---------------------------------------------------------------
   18. LARGURA MÁXIMA — Ecrãs muito grandes (UX)
--------------------------------------------------------------- */
@media (min-width: 1600px) {
    .container {
        max-width: 1440px !important;
    }
}