/* =========================================================
    RUPA — HOME
   Residência Universitária Particular de Aveiro
========================================================= */

/* ---------------------------------------------------------
   BASE DA HOME
--------------------------------------------------------- */

.home-page {
    overflow-x: clip;
    background: #ffffff;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.home-hero {
    position: relative;
    min-height: 720px;
    color: #ffffff;

    /* Mantém a fotografia original da residência */
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 47, 36, .76) 0%,
            rgba(5, 47, 36, .48) 40%,
            rgba(5, 47, 36, .12) 72%,
            rgba(5, 47, 36, .04) 100%
        ),
        url("../images/hero.png");

    background-size: cover;
    background-position: center 47%;
    background-repeat: no-repeat;
}

.home-hero-media,
.home-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    min-height: 650px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding-top: 104px;
}

.home-hero-kicker,
.home-section-label {
    display: inline-block;

    margin: 0 0 14px;

    color: #0b4f3f;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .17em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-hero-kicker {
    color: #d7ff86;
}

.home-hero h1 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(58px, 6.2vw, 94px);
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: .91;

    text-transform: uppercase;
}

.home-hero-content > p {
    max-width: 620px;

    margin: 24px 0 28px;

    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.35;

    text-transform: uppercase;
}

.home-primary-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;

    padding: 0 21px;

    border-radius: 6px;

    background: #d7ff86;
    color: #06372c;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;

    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.home-primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
}


/* ---------------------------------------------------------
   PESQUISA / DISPONIBILIDADE
--------------------------------------------------------- */

.home-booking-wrapper {
    position: absolute;
    z-index: 5;

    right: 0;
    bottom: -46px;
    left: 0;
}

.home-booking-bar {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(170px, .75fr)
        minmax(230px, auto);

    overflow: hidden;

    border: 1px solid #e0e5e1;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 18px 46px rgba(5, 44, 33, .15);
}

.home-booking-field {
    display: flex;
    min-height: 90px;
    flex-direction: column;
    justify-content: center;

    padding: 18px 22px;

    border-right: 1px solid #e0e5e1;
}

.home-booking-field label {
    margin-bottom: 7px;

    color: #68716c;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;

    text-transform: uppercase;
}

.home-booking-field input,
.home-booking-field select {
    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #111713;

    font-size: 14px;
    font-weight: 700;
}

.home-booking-button {
    display: flex;
    min-height: 90px;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    background: #0b4f3f;
    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;

    text-decoration: none;

    transition: background .18s ease;
}

.home-booking-button:hover {
    background: #06372c;
}


/* ---------------------------------------------------------
   ESPAÇOS
--------------------------------------------------------- */

.home-spaces {
    padding: 156px 0 166px;
    background: #ffffff;
}

.home-section-heading {
    max-width: 850px;
    margin-bottom: 28px;
}

.home-section-heading-row {
    display: block;
}

.home-section-heading h2,
.home-location h2,
.home-final-cta h2 {
    margin: 0;

    font-size: clamp(48px, 5.35vw, 76px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .94;

    text-transform: uppercase;
}

.home-space-tabs {
    display: flex;
    gap: 8px;

    margin: 32px 0 28px;
}

.home-space-tab {
    min-height: 44px;

    padding: 0 20px;

    border: 1px solid #0b4f3f;
    border-radius: 5px;

    background: #ffffff;
    color: #0b4f3f;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;

    cursor: pointer;
}

.home-space-tab.is-active {
    background: #0b4f3f;
    color: #ffffff;
}

.home-rooms-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.home-room-card[hidden] {
    display: none !important;
}

.home-room-card {
    overflow: hidden;

    border: 1px solid #dfe4df;
    border-radius: 8px;

    background: #ffffff;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.home-room-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(8, 47, 35, .12);
}

.home-room-image {
    position: relative;

    display: block;
    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #eef1ee;
}

.home-room-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1);
}

.home-room-card:hover .home-room-image img {
    transform: scale(1.035);
}

.home-room-no-image {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;

    color: #738079;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.home-room-image-top {
    position: absolute;

    top: 12px;
    right: 12px;
    left: 12px;

    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.home-room-kind,
.home-room-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;

    padding: 0 9px;

    border-radius: 5px;

    background: #ffffff;
    color: #06372c;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.home-room-status {
    background: #d7ff86;
}

.home-room-status.is-unavailable {
    background: #d94a45;
    color: #ffffff;
}

.home-room-content {
    padding: 21px 20px 22px;
}

.home-room-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.home-room-title-row h3 {
    margin: 0;

    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.home-room-title-row h3 a {
    text-decoration: none;
}

.home-room-price {
    flex: 0 0 auto;
    text-align: right;
}

.home-room-price strong {
    display: block;

    color: #06372c;

    font-size: 23px;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
}

.home-room-price span {
    color: #77817b;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
}

.home-room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;

    margin: 18px 0;
    padding: 15px 0;

    border-top: 1px solid #e1e5e2;
    border-bottom: 1px solid #e1e5e2;
}

.home-room-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #59625d;

    font-size: 10px;
    font-weight: 650;
}

.home-room-link,
.home-location-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #06372c;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;

    text-decoration: none;
}

.home-room-link .lucide-icon,
.home-location-link .lucide-icon {
    transition: transform .18s ease;
}

.home-room-link:hover .lucide-icon,
.home-location-link:hover .lucide-icon {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   LOCALIZAÇÃO
   Full bleed: mapa chega mesmo à direita
--------------------------------------------------------- */

.home-location {
    overflow: hidden;

    background: #06372c;
    color: #ffffff;
}

.home-location-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(520px, 1fr);

    width: 100%;
    min-height: 590px;
}

.home-location-content {
    display: flex;
    justify-content: flex-end;

    padding: 0;
}

.home-location-content-inner {
    width: 100%;

    padding:
        82px
        68px
        82px
        max(
            24px,
            calc((100vw - 1220px) / 2)
        );
}

.home-location .home-section-label {
    color: #d7ff86;
}

.home-location h2 {
    max-width: 650px;

    color: #ffffff;

    font-size: clamp(50px, 5.4vw, 76px);
}

.home-location-content p {
    max-width: 440px;

    color: rgba(255, 255, 255, .68);

    font-size: 14px;
    line-height: 1.65;
}

.home-location-address {
    margin: 30px 0 0 !important;

    color: #ffffff !important;

    font-weight: 800;
}

.home-location-link {
    margin-top: 8px;
    color: #d7ff86;
}

.home-location-map {
    width: 100%;
    min-height: 590px;
}

.home-location-map iframe {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 590px;

    border: 0;
}


/* ---------------------------------------------------------
   CTA FINAL
--------------------------------------------------------- */

.home-final-cta {
    padding: 120px 0 140px;

    border-top: 1px solid #e0e5e1;

    background: #ffffff;
    color: #06372c;
}

.home-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.home-final-cta .home-section-label {
    color: #0b4f3f;
}

.home-final-cta h2 {
    max-width: 880px;
}

.home-final-button {
    display: inline-flex;
    min-height: 52px;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;

    padding: 0 22px;

    border-radius: 6px;

    background: #06372c;
    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;

    text-decoration: none;
}


/* ---------------------------------------------------------
   ANIMAÇÃO — leve
--------------------------------------------------------- */

.home-hero h1 {
    animation:
        homeHeroEnter
        .65s
        cubic-bezier(.2, .8, .2, 1)
        both;
}

@keyframes homeHeroEnter {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) {

    .home-rooms-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-location-grid {
        grid-template-columns: 1fr;
    }

    .home-location-content {
        justify-content: flex-start;
    }

    .home-location-content-inner {
        padding: 70px 28px;
    }

    .home-location-map,
    .home-location-map iframe {
        min-height: 430px;
    }
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .home-hero {
        min-height: 690px;
        background-position: 61% center;
    }

    .home-hero-content {
        min-height: 600px;
        justify-content: flex-start;

        padding-top: 132px;
    }

    .home-hero h1 {
        max-width: 100%;

        font-size: clamp(42px, 11.5vw, 56px);
        line-height: .93;
    }

    .home-hero-content > p {
        max-width: 300px;

        font-size: 13px;
        line-height: 1.4;
    }

    .home-booking-wrapper {
        bottom: -178px;
    }

    .home-booking-bar {
        grid-template-columns: 1fr;
    }

    .home-booking-field {
        min-height: 66px;

        padding: 13px 16px;

        border-right: 0;
        border-bottom: 1px solid #e0e5e1;
    }

    .home-booking-button {
        min-height: 54px;
    }

    .home-spaces {
        padding: 245px 0 82px;
    }

    .home-section-heading h2,
    .home-location h2,
    .home-final-cta h2 {
        font-size: clamp(42px, 12vw, 58px);
        line-height: .96;
    }

    .home-space-tabs {
        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }

    .home-space-tabs::-webkit-scrollbar {
        display: none;
    }

    .home-space-tab {
        flex: 0 0 auto;
    }

    .home-rooms-grid {
        grid-template-columns: 1fr;
    }

    .home-location-content-inner {
        padding: 64px 22px;
    }

    .home-final-cta {
        padding: 68px 0;
    }

    .home-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .home-hero h1 {
        animation: none;
    }
}

/* =========================================================
   V4 — CARDS / GALERIA COMO ORIGEM DA FOTO
========================================================= */

.home-room-card {
    border-radius: 8px;
}

.home-room-image {
    background: #eef1ee;
}

.home-room-image img {
    display: block;
}

.home-room-kind,
.home-room-status {
    border-radius: 5px;
}

.home-room-link {
    font-weight: 900;
}
/* =========================================================
   RUPA — CALENDÁRIO DA HOME / RANGE PICKER
   ========================================================= */

.home-booking-wrapper { overflow: visible; }
.home-booking-bar { overflow: visible; position: relative; }
.home-booking-date-field { position: relative; }
.home-date-trigger {
    display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px;
    padding:0; border:0; background:transparent; color:#111713; font:inherit;
    font-size:14px; font-weight:700; text-align:left; cursor:pointer;
}
.home-date-icon { display:inline-flex; flex:0 0 auto; color:#0b4f3f; }
.home-date-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.home-booking-button {
    min-width:250px;
    min-height:96px;
    flex-direction:column;
    gap:2px;
    padding:18px 30px;
    line-height:1.05;
    text-align:center;
}
.home-booking-button span,
.home-booking-button strong { display:block; }
.home-booking-button span { font-size:9px; font-weight:800; letter-spacing:.14em; }
.home-booking-button strong { font-size:12px; font-weight:900; letter-spacing:.1em; }

.home-date-picker {
    position:absolute; z-index:20; top:calc(100% + 12px); left:0; right:0;
    width:min(900px, calc(100% - 40px)); margin:0 auto;
    padding:22px 24px 18px;
    border:1px solid #dfe5e1; border-radius:12px; background:#fff;
    box-shadow:0 24px 65px rgba(5,44,33,.20); color:#102019;
}
.home-date-picker[hidden] { display:none !important; }
.home-date-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:1px solid #e7ebe8; }
.home-date-picker-head span { display:block; margin-bottom:5px; color:#6b7c73; font-size:9px; font-weight:900; letter-spacing:.16em; }
.home-date-picker-head strong { display:block; font-size:16px; font-weight:850; letter-spacing:-.02em; }
.home-date-picker-close { border:0; background:transparent; color:#24453a; font-size:24px; line-height:1; cursor:pointer; }
.home-date-picker-nav { position:absolute; top:89px; right:24px; left:24px; display:flex; justify-content:space-between; pointer-events:none; }
.home-date-picker-nav button { width:36px; height:36px; border:0; background:transparent; color:#0b4f3f; font-size:22px; cursor:pointer; pointer-events:auto; }
.home-calendar-months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; padding:17px 28px 22px; }
.home-calendar-month h4 { margin:0 0 20px; text-align:center; font-size:15px; font-weight:850; }
.home-calendar-week,.home-calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.home-calendar-week { margin-bottom:7px; }
.home-calendar-week span { color:#77847d; font-size:9px; font-weight:800; text-align:center; }
.home-calendar-grid button,.home-calendar-empty { aspect-ratio:1; min-width:0; }
.home-calendar-grid button { position:relative; border:0; border-radius:50%; background:transparent; color:#17221d; font-size:12px; font-weight:700; cursor:pointer; }
.home-calendar-grid button:hover:not(:disabled) { background:#eef7f2; }
.home-calendar-grid button.is-disabled { color:#cbd2ce; cursor:not-allowed; }
.home-calendar-grid button.is-range { border-radius:0; background:#e7f3ed; color:#0b4f3f; }
.home-calendar-grid button.is-selected { z-index:2; border-radius:50%; background:#0b5b49; color:#fff; }
.home-calendar-grid button.is-start.is-selected,
.home-calendar-grid button.is-end.is-selected { background:#0b5b49; color:#fff; }
.home-date-picker-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; border-top:1px solid #e7ebe8; }
.home-calendar-legend { display:flex; flex-wrap:wrap; gap:16px; color:#78837d; font-size:10px; }
.home-calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
.home-calendar-legend i { width:8px; height:8px; border:1px solid #d5ddd8; border-radius:50%; background:#fff; }
.home-calendar-legend i.is-selected { border-color:#0b5b49; background:#0b5b49; }
.home-date-apply { min-height:42px; padding:0 20px; border:0; border-radius:6px; background:#0b5b49; color:#fff; font-size:9px; font-weight:900; letter-spacing:.1em; cursor:pointer; }
.home-date-apply:disabled { opacity:.38; cursor:not-allowed; }

@media (max-width:700px) {
    .home-booking-button { min-width:0; min-height:62px; }
    .home-date-picker { position:fixed; z-index:9999; top:auto; right:12px; bottom:12px; left:12px; width:auto; max-height:calc(100vh - 24px); overflow:auto; margin:0; padding:20px 18px 16px; }
    .home-calendar-months { grid-template-columns:1fr; gap:0; padding:18px 10px; }
    .home-calendar-month:nth-child(2) { display:none; }
    .home-date-picker-nav { top:84px; right:18px; left:18px; }
    .home-date-picker-foot { align-items:flex-end; }
}


/* =========================================================
   RUPA — HOME HERO / CTA 2026-08-29
   Mais respiração vertical sem alterar a estrutura global
========================================================= */

@media (min-width: 701px) {
    .home-hero {
        min-height: 790px;
    }

    .home-hero-content {
        min-height: 700px;
        justify-content: center;
        padding-top: 142px;
        padding-bottom: 78px;
    }

    .home-hero-kicker {
        margin-bottom: 18px;
    }

    .home-hero-content > p {
        margin-top: 28px;
        margin-bottom: 32px;
    }

    .home-booking-wrapper {
        bottom: -48px;
    }
}

/* O novo título do CTA é mais comprido: dá-lhe largura suficiente
   sem reduzir agressivamente a tipografia. */
.home-final-cta h2 {
    max-width: 960px;
}

@media (max-width: 700px) {
    .home-hero-content {
        padding-top: 148px;
    }

    .home-final-cta h2 {
        max-width: 100%;
    }
}