/*
 * Regional portal visual identities.
 *
 * The structural components stay shared, while the active portal receives
 * its own visual language through data-portal-code on the html element.
 */

/* -------------------------------------------------------------------------
   Valle Verzasca: water, stone, glass and sharper geometry
   ------------------------------------------------------------------------- */

html[data-portal-code="verzasca"] {
    --regional-hero-gradient:
        linear-gradient(135deg, #083d44 0%, #0f6d75 48%, #72c8c5 100%);
    --regional-panel-gradient:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(225,244,243,.92));
    --regional-card-radius: 14px;
    --regional-header-shadow: 0 18px 46px rgba(5, 61, 68, .16);
}

html[data-portal-code="verzasca"] body {
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 193, 191, .16), transparent 28rem),
        linear-gradient(180deg, #f3fbfa 0%, #edf6f5 46%, #f8faf9 100%);
}

html[data-portal-code="verzasca"] .portal-global-header {
    border-bottom: 1px solid rgba(12, 105, 114, .22);
    background:
        linear-gradient(90deg, rgba(246, 253, 252, .97), rgba(226, 246, 244, .95));
    box-shadow: var(--regional-header-shadow);
}

html[data-portal-code="verzasca"] .portal-header__brand {
    color: #0b626b;
}

html[data-portal-code="verzasca"] .portal-header__brand-mark {
    transform: scaleX(1.08);
    color: #1f8790;
}

html[data-portal-code="verzasca"] .portal-header__brand-name {
    letter-spacing: .025em;
    font-weight: 820;
}

html[data-portal-code="verzasca"] .exp-hero {
    background: var(--regional-hero-gradient);
}

html[data-portal-code="verzasca"] .exp-hero__art {
    opacity: .92;
    filter: saturate(1.12);
}

html[data-portal-code="verzasca"] .exp-hero__sun {
    border-radius: 45% 55% 52% 48%;
    background: #f1c55a;
    box-shadow: 0 0 0 18px rgba(241, 197, 90, .13);
}

html[data-portal-code="verzasca"] .exp-hero__mountain--back {
    opacity: .68;
    filter: hue-rotate(128deg) saturate(.68);
}

html[data-portal-code="verzasca"] .exp-hero__mountain--front {
    filter: hue-rotate(126deg) saturate(.82) brightness(.82);
}

html[data-portal-code="verzasca"] .exp-hero__river {
    opacity: .92;
    transform: rotate(-2deg) scaleX(1.05);
}

html[data-portal-code="verzasca"] :is(
    .exp-card,
    .portal-card,
    .business-card,
    .community-card,
    .portal-mega-section
) {
    border-radius: var(--regional-card-radius);
    border-color: rgba(22, 107, 115, .18);
    background: var(--regional-panel-gradient);
    box-shadow: 0 14px 34px rgba(13, 89, 96, .10);
}

html[data-portal-code="verzasca"] :is(
    .exp-button--primary,
    .portal-button--primary,
    .portal-header__account-link
) {
    border-radius: 8px;
}

/* -------------------------------------------------------------------------
   Vallemaggia: forest, chestnut, copper and softer organic geometry
   ------------------------------------------------------------------------- */

html[data-portal-code="vallemaggia"] {
    --regional-hero-gradient:
        linear-gradient(135deg, #2c4432 0%, #476a4f 50%, #b5845b 100%);
    --regional-panel-gradient:
        linear-gradient(145deg, rgba(255,252,245,.98), rgba(240,232,214,.90));
    --regional-card-radius: 26px;
    --regional-header-shadow: 0 18px 48px rgba(55, 70, 47, .15);
}

html[data-portal-code="vallemaggia"] body {
    background:
        radial-gradient(circle at 86% 7%, rgba(168, 112, 74, .13), transparent 28rem),
        linear-gradient(180deg, #fbf8f1 0%, #f2eee3 48%, #faf8f3 100%);
}

html[data-portal-code="vallemaggia"] .portal-global-header {
    border-bottom: 1px solid rgba(76, 95, 62, .22);
    background:
        linear-gradient(90deg, rgba(251, 248, 240, .97), rgba(235, 239, 225, .95));
    box-shadow: var(--regional-header-shadow);
}

html[data-portal-code="vallemaggia"] .portal-header__brand {
    color: #405a38;
}

html[data-portal-code="vallemaggia"] .portal-header__brand-mark {
    transform: scaleY(1.08);
    color: #8b5d3f;
}

html[data-portal-code="vallemaggia"] .portal-header__brand-name {
    letter-spacing: .012em;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

html[data-portal-code="vallemaggia"] .exp-hero {
    background: var(--regional-hero-gradient);
}

html[data-portal-code="vallemaggia"] .exp-hero__sun {
    background: #d8a66e;
    box-shadow: 0 0 0 22px rgba(216, 166, 110, .13);
}

html[data-portal-code="vallemaggia"] .exp-hero__mountain--back {
    filter: hue-rotate(28deg) saturate(.60) brightness(.94);
}

html[data-portal-code="vallemaggia"] .exp-hero__mountain--front {
    filter: hue-rotate(18deg) saturate(.70) brightness(.75);
}

html[data-portal-code="vallemaggia"] .exp-hero__river {
    opacity: .62;
    filter: sepia(.25) hue-rotate(320deg);
}

html[data-portal-code="vallemaggia"] :is(
    .exp-card,
    .portal-card,
    .business-card,
    .community-card,
    .portal-mega-section
) {
    border-radius: var(--regional-card-radius);
    border-color: rgba(90, 101, 71, .18);
    background: var(--regional-panel-gradient);
    box-shadow: 0 16px 38px rgba(72, 78, 59, .10);
}

html[data-portal-code="vallemaggia"] :is(
    .exp-button--primary,
    .portal-button--primary,
    .portal-header__account-link
) {
    border-radius: 999px;
}

/* Portal identity is deliberately visible for non-reference tenants until
   their own uploaded logos are configured. */
html[data-portal-code="verzasca"] .portal-header__brand-name,
html[data-portal-code="vallemaggia"] .portal-header__brand-name {
    display: inline-flex;
}

/* Mobile adjustments */
@media (max-width: 900px) {
    html[data-portal-code="verzasca"] .portal-global-header,
    html[data-portal-code="vallemaggia"] .portal-global-header {
        backdrop-filter: blur(18px);
    }

    html[data-portal-code="verzasca"] .portal-header__brand-name,
    html[data-portal-code="vallemaggia"] .portal-header__brand-name {
        max-width: 13rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}