/* Final presentation layer for the complete Portugal and islands calendar. */

html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(28rem, 0.56fr) !important;
    align-items: start !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 43rem !important;
    margin: -30px 0 1.5rem !important;
    padding: 0 clamp(1.5rem, 4vw, 4rem) !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Estica-se para lá da grelha em ambos os lados, tal como o banner verde
   partilhado (index, observatório, etc.): mais perto da barra lateral à
   esquerda e a continuar por baixo do painel do calendário à direita, em vez
   de terminar exatamente na margem da grelha. */
html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 4.6875rem;
    /* .inner tem max-width:1600px e fica centrada dentro de #main (janela menos
       os 18em da barra lateral); em ecrãs largos isso cria um vão de cada lado
       antes da margem real da janela, que cresce com a largura do ecrã — por
       isso o excesso é calculado (não fixo), para acompanhar esse vão em vez
       de ficar "curto" em monitores largos. Soma-se ainda uma margem fixa
       generosa, que também absorve a diferença entre uma barra de scroll
       reservada (comum no Firefox/Windows) e uma barra em overlay
       (Safari/macOS). O excesso é sempre cortado pelo overflow-x:hidden
       partilhado do body, por isso nunca é visível para lá da janela. */
    --calendar-ribbon-gap: max(0px, (100vw - 18em - 1600px) / 2);
    left: calc(-1 * var(--calendar-ribbon-gap) - 5rem);
    right: calc(-1 * var(--calendar-ribbon-gap) - 5rem);
    height: 21.25rem;
    border-radius: 2rem 0 0 2rem;
    background: #174732;
    transform: none;
    box-shadow: 0 1.5rem 4rem rgba(20, 61, 43, 0.1);
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-left-column {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}

html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero .calendar-banner-copy {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 58rem !important;
    height: 21.25rem !important;
    min-height: 21.25rem !important;
    margin: 4.6875rem auto 0 !important;
    padding: 2rem 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-banner-copy::before,
html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-banner-copy::after {
    display: none !important;
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero .category-label {
    position: absolute !important;
    top: -3.5rem !important;
    left: 0 !important;
    display: block !important;
    margin: 0 !important;
    color: #6f8276 !important;
    font-size: max(11px, 0.68rem) !important;
    letter-spacing: 0.36em !important;
    white-space: nowrap;
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero h1 {
    position: static !important;
    width: auto !important;
    max-width: 15ch !important;
    margin: 0 auto 1.15rem !important;
    color: #fff !important;
    font-size: clamp(3rem, 4vw, 4.75rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero h1 em {
    display: inline !important;
    color: #a9c3a8 !important;
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero .hero-intro {
    position: static !important;
    width: auto !important;
    max-width: 46rem !important;
    margin: 0 auto !important;
    color: #e3ebe5 !important;
    font-size: clamp(0.96rem, 1vw, 1.08rem) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-panel {
    position: relative !important;
    z-index: 2;
    inset: auto !important;
    width: 100% !important;
    max-width: 36.5rem !important;
    height: auto !important;
    min-height: 36.5rem !important;
    margin: 2rem 0 0 auto !important;
    padding: clamp(1.8rem, 2.5vw, 2.5rem) !important;
    transform: translateY(-1.25rem) !important;
    border: 1px solid #e9e3d4 !important;
    border-radius: 24px !important;
    background: #f6f2e9 !important;
    box-shadow: 0 1.5rem 4rem rgba(4, 28, 17, 0.24) !important;
}

html body #main .calendar-local-context {
    width: 100%;
    max-width: 58rem;
    margin: 1.25rem auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

html body #main .calendar-local-context .local-profile {
    max-width: none;
    margin-top: 0.8rem;
    gap: 0.65rem;
}

html body #main .calendar-local-context .profile-chip {
    padding: 0.65rem 0.75rem;
}

html body #main .calendar-local-context .location-guide {
    grid-template-columns: 1fr;
    margin-top: 0.75rem;
    padding: 0.8rem 0.9rem;
}

html body #main .calendar-local-context .location-guide h3 {
    margin-bottom: 0.25rem;
}

html body #main .calendar-local-context .location-guide p {
    line-height: 1.4;
}

html body #main .section-nav {
    top: 1.75rem !important;
    z-index: 40 !important;
}

html body #main .section-nav.bio-nav-pinned {
    border-color: #e9e3d4 !important;
    background: #f6f2e9 !important;
}

/* Barra de secções sempre numa só linha: se não couber, desliza na horizontal e o «↑ Topo» fica
   preso à direita, visível. Espaçamento ligeiramente menor para caber inteira a partir de ~1440 px. */
html body #main .section-nav {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
}
html body #main .section-nav::-webkit-scrollbar {
    display: none;
}
html body #main .section-nav > a {
    flex: 0 0 auto !important;
}
html body #main .section-nav.bio-nav-pinned .bio-nav-top {
    position: sticky;
    right: 0;
    z-index: 1;
    padding-left: 14px !important;
    background: #f6f2e9 !important;
    box-shadow: -16px 0 12px -6px #f6f2e9, 16px 0 0 0 #f6f2e9 !important; /* cobre também a margem interior à direita */
}

html body #main :is(#acoes, #catalogo, #semana, #praticas, #vigilancia, #pragas-catalogo, #principios, #mundo) {
    scroll-margin-top: 6.5rem;
}

html body #main .principles .moon-note {
    border-color: rgba(255, 255, 255, 0.58) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    gap: 28px !important;
    padding: 2.3em !important;
}

/* Os dois ícones (lua e meteorologia) partilham exatamente a mesma caixa,
   para ficarem no mesmo tamanho e alinhados um com o outro. */
html body #main .principles :is(.moon-large, .weather-badge) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
}

html body #main .principles .moon-large span {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.28) 0 4%, transparent 5%),
        radial-gradient(circle at 42% 68%, rgba(151, 151, 130, 0.2) 0 5%, transparent 6%),
        linear-gradient(145deg, #f0edcf, #c7c5ab) !important;
}

html body #main .principles .moon-large span::after {
    content: "";
    position: absolute;
    inset: -8px -22px -8px 34px;
    border-radius: 50%;
    background: #17271f;
}

html body #main .principles .weather-icon {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 6px 14px rgba(180, 120, 30, 0.35));
}

@media (max-width: 736px) {
    html body #main .principles :is(.moon-large, .weather-badge) {
        width: 86px;
        height: 86px;
    }

    html body #main .principles .moon-large span {
        width: 78px;
        height: 78px;
    }

    html body #main .principles .moon-large span::after {
        inset: -6px -17px -6px 26px;
    }

    html body #main .principles .weather-icon {
        width: 78px;
        height: 78px;
    }
}

html body #main .principles .moon-note h3 {
    color: #fff !important;
    font-size: 1.15em !important;
    margin-bottom: 0.5em !important;
}

html body #main .principles .moon-note p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.92em !important;
    line-height: 1.7 !important;
}

html body #main .principles .moon-note p + p {
    margin-top: 0.9em !important;
}

@media screen and (max-width: 1100px) {
    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        min-height: 0 !important;
        padding: 0 1.5rem 2rem !important;
    }

    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero::before {
        top: 5rem;
        left: 0;
        right: 0;
        height: 25rem;
        background: #174732;
        transform: none;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-banner-copy {
        height: 25rem !important;
        min-height: 25rem !important;
        margin: 5rem auto 0 !important;
        padding: 2rem 1rem !important;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero .category-label {
        top: -3.8rem !important;
        left: 0.5rem !important;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-panel {
        max-width: 42rem !important;
        min-height: 0 !important;
        margin: -1rem auto 0 !important;
        transform: none !important;
    }

    html body #main .calendar-local-context {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 736px) {
    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero {
        padding: 0 1rem 1.5rem !important;
    }

    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero::before {
        top: 4.5rem;
        left: 0;
        right: 0;
        height: 28rem;
        background: #174732;
        border-radius: 1.5rem 0 0 1.5rem;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero .calendar-banner-copy {
        height: 28rem !important;
        min-height: 28rem !important;
        margin-top: 4.5rem !important;
        padding: 2rem 0.75rem !important;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero .category-label {
        top: -3.5rem !important;
        left: 0.25rem !important;
        font-size: max(11px, 0.6rem) !important;
        letter-spacing: 0.28em !important;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero h1 {
        font-size: clamp(2.7rem, 15vw, 4.3rem) !important;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero h1 em {
        display: block !important;
    }

    html body[data-hero-theme="calendar"] #main .calendar-local-hero .hero-intro {
        font-size: 0.94rem !important;
        line-height: 1.5 !important;
    }

    html body #main .calendar-local-context .local-profile {
        grid-template-columns: 1fr !important;
    }

    html body #main .principles .moon-note {
        grid-template-columns: 1fr !important;
    }
}

/* Mesma tipografia e alinhamento dos restantes topos (Georgia, título a negrito, subtítulo leve,
   texto à esquerda); o painel do calendário mantém-se à direita. */
html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero .calendar-banner-copy {
    align-items: flex-start !important;
    max-width: 44rem !important;
    margin-left: 0 !important;
    padding-left: clamp(1.5rem, 4vw, 4rem) !important;
}

html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero h1 {
    max-width: 100% !important;
    margin: 0 0 1.15rem !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.055em !important;
    text-align: left !important;
}

html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero h1 em {
    display: block !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero .hero-intro {
    margin: 0 !important;
    text-align: left !important;
}

/* Tablet e telemóvel: o fundo verde passa a ser o próprio bloco do título, com altura automática.
   Com a faixa decorativa de altura fixa, o texto (que cresce ao estreitar) saía do verde e o bloco
   seguinte ficava por cima dele. */
@media screen and (max-width: 1100px) {
    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero::before {
        display: none !important;
    }

    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero .calendar-banner-copy {
        height: auto !important;
        min-height: 0 !important;
        padding: 2.5rem 1.5rem !important;
        border-radius: 1.5rem !important;
        background: #174732 !important;
        box-shadow: 0 1.5rem 4rem rgba(20, 61, 43, 0.1) !important;
    }
}

@media screen and (max-width: 736px) {
    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero .calendar-banner-copy {
        padding: 2rem 1.1rem !important;
    }

    html body[data-hero-theme="calendar"] #main .hero.calendar-local-hero h1 {
        max-width: 100% !important;
        font-size: clamp(2rem, 10.5vw, 3.4rem) !important;
        overflow-wrap: anywhere;
    }
}

/* Ligação ao hub dentro da barra de secções, com a tipografia das restantes ligações. */
html body #main .section-nav .hub-back {
    flex: none;
    align-self: center;
    margin: 0;
    padding: 0 1.5rem 0 0.75rem;
    border-right: 1px solid #dde5dc !important;
    color: #8f624a !important;
    font-size: max(11px, 0.65em);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
html body #main .section-nav .hub-back:hover {
    color: #7a5038 !important;
    transform: translateX(-3px);
}