/* 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;
    left: calc(clamp(-52px, -3.2vw, -28px) - 28px);
    right: clamp(-64px, -4vw, -32px);
    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: 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;
}

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;
}

html body #main .principles .moon-large {
    width: 180px;
    height: 180px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

html body #main .principles .moon-large span {
    position: relative;
    width: 92px;
    height: 92px;
    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;
    box-shadow: 0 0 34px rgba(232, 229, 197, 0.2);
}

html body #main .principles .moon-large span::after {
    content: "";
    position: absolute;
    inset: -7px -20px -7px 31px;
    border-radius: 50%;
    background: #17271f;
    box-shadow: -5px 0 10px rgba(23, 39, 31, 0.4);
}

@media (max-width: 736px) {
    html body #main .principles .moon-large {
        width: 140px;
        height: 140px;
    }

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

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

html body #main .principles .water-badge {
    position: relative;
    width: 180px;
    height: 180px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 33% 30%, rgba(255, 255, 255, 0.22), rgba(95, 168, 220, 0.14) 45%, rgba(28, 90, 138, 0.06) 100%);
    box-shadow: 0 0 34px rgba(95, 168, 220, 0.22);
    overflow: hidden;
}

html body #main .principles .water-ripple {
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
}

html body #main .principles .water-drop {
    position: relative;
    width: 92px;
    height: 92px;
    filter: drop-shadow(0 6px 14px rgba(15, 55, 88, 0.45));
}

@media (max-width: 736px) {
    html body #main .principles .water-badge {
        width: 140px;
        height: 140px;
    }

    html body #main .principles .water-ripple {
        inset: 17px;
    }

    html body #main .principles .water-drop {
        width: 72px;
        height: 72px;
    }
}

html body #main .principles .moon-note h3 {
    color: #fff !important;
}

html body #main .principles .moon-note p {
    color: rgba(255, 255, 255, 0.76) !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: 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;
    }
}