/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #e7ecf1;
    color: #494949;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.leaflet-attribution-flag { display: none !important; }

a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

a:hover {
    opacity: 0.8;
}

p {
    margin: 0;
}

/* Page container */
.page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header styles */
.header {
    /* background: linear-gradient(180deg, #A2ADC0 0%, #585e69 100%); */
    background: linear-gradient(180deg, #91a2bd 0%, #A2ADC0 100%);
    /* background: #A2ADC0; */
    position: relative;
    /* padding: 20px 16px 60px; */
    /* padding: 40px 16px 100px; */
    padding: 10px 16px 50px;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 158" preserveAspectRatio="xMidYMax slice"%3E%3Cg clip-path="url(%23a)"%3E%3Cpath fill="%231A2635" d="m216.177 43.482-64.439 16.834-51.559 12.097v47.276h254.967V60.694L216.177 43.482Z"/%3E%3Cpath fill="%23F2F3F5" d="m198.429 0 2.19 18.835 15.558 24.647-39.053 19.193-76.945 9.739V33.535L198.429 0Z"/%3E%3Cpath fill="%23526A8C" d="M355.146 60.694c-.805 0-60.657 10.87-60.657 10.87l-78.312-28.082-27.427-23.628L198.429 0l156.717 60.694Z"/%3E%3Cpath fill="%2351668A" d="M0 135.768h1440V119.67H0v16.098Z"/%3E%3Cpath fill="%23A2ADC0" d="M0 158h1440v-22.213H0V158Z"/%3E%3Cpath fill="%231A2635" d="M100.179 72.413 62.979 48.2 0 64.77v54.919h100.179V72.414Z"/%3E%3Cpath fill="%23F2F3F5" d="M100.179 33.536 50.08 18.156 0 19.872V64.77L62.979 48.2l37.2 24.213V33.536Z"/%3E%3Cpath fill="%23526A8C" d="m50.08 18.155 14.004 14.023L62.979 48.2l37.2 24.213V33.536L50.08 18.156Z"/%3E%3Cpath fill="%231A2635" d="m485.972 67.318 72.602-7.002 51.559 12.097v47.276H355.146V60.694l130.826 6.624Z"/%3E%3Cpath fill="%23526A8C" d="M355.147 60.694c.805 0 109.576 6.624 109.576 6.624l20.781 4.227 73.051-11.248-155.669-39.594-75.859 29.101 28.101 10.89h.019Z"/%3E%3Cpath fill="%231A2635" d="m610.133 72.413 87.617 14.098 124.011 12.154 52.457 21.024H610.133V72.414Z"/%3E%3Cpath fill="%23F2F3F5" d="m355.146 60.694 62.792 3.793 8.837-27.327-23.87-16.457-75.859 29.101 28.1 10.89Z"/%3E%3Cpath fill="%231A2635" d="m875.117 79.528-48.788 8.87H798.34l41.412 31.291h193.018V96.476L875.117 79.528Z"/%3E%3Cpath fill="%231A2635" d="m798.34 88.398-39.203-6.397-64.645 14.362 69.438 23.326h75.822l-41.412-31.29ZM1131.21 102.553l55.54-3.643 39.02-4.133v24.912h-193V96.476l98.44 6.077ZM1225.77 94.777l103.57 7.247L1440 99.609v20.08h-214.23V94.777Z"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="a"%3E%3Cpath fill="%23fff" d="M0 0h1440v158H0z"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
    background-size: cover;
    background-position: bottom center;
    /* background-position: bottom left; */
    background-repeat: no-repeat;
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-trees {
    position: absolute;
    bottom: 0;
    left: 16px;
    z-index: 2;
}

.header-trees svg {
    display: block;
    width: auto;
    /* height: auto; */
    /* height: 40px; */
    
}

.logo img {
    width: 150px;
}
.weather-icons {
    opacity: 0.8;
}

/* Search container */
.search-container {
    margin: 30px 16px 24px;
    position: relative;
    z-index: 10;
}

.search-bar {
    background: white;
    border-radius: 50px;
    padding: 12px 20px 12px 56px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #494949;
    letter-spacing: -0.4px;
}

.search-input::placeholder {
    color: #989898;
}

/* Main content */
.main-content {
    flex: 1;
    padding: 0 0 40px;
}

/* Section styles */
.section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #494949;
    letter-spacing: -0.5px;
    margin: 0 16px 16px;
    padding-top: 16px;
}

.all-resorts-section .section-title {
    color: #1a2635;
}

/* Letter grouping */
.letter-group {
    margin-bottom: 32px;
}

.letter-heading {
    font-size: 40px;
    font-weight: 400;
    color: #51668a;
    letter-spacing: -0.5px;
    margin: 24px 16px 16px;
    line-height: 1;
}

/* Resort grid - Mobile first (single column) */
.resort-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}

/* Resort card */
.resort-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 69px;
}

.resort-name {
    flex-shrink: 0;
    max-width: 110px;

}

.resort-name p {
    font-size: 14px;
    font-weight: 700;
    color: #494949;
    letter-spacing: -0.6px;
    line-height: 18px;
    white-space: pre-line;
}

.resort-info {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
}

.snow-labels,
.snow-values {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.snow-labels {
    min-width: 58px;
}

.snow-labels p {
    font-size: 12px;
    font-weight: 600;
    color: #989898;
    letter-spacing: -0.4px;
    line-height: 18px;
    height: 18px;
}

.snow-values {
    min-width: 47px;
}

.snow-values p {
    font-size: 12px;
    font-weight: 600;
    color: #494949;
    letter-spacing: -0.4px;
    line-height: 18px;
    height: 18px;
}

.resort-status {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    min-width: 37px;
}

.status-badge {
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 15px;
    line-height: 6px;
    white-space: nowrap;
}

.status-badge.open {
    background-color: #ebf3ea;
    color: #65b266;
}

.status-badge.closed {
    background-color: #ffdbdb;
    color: #cd3f3f;
}

.temperature {
    font-size: 12px;
    font-weight: 600;
    color: #989898;
    letter-spacing: -0.4px;
    text-align: right;
    display: flex;
    align-items: flex-start;
    gap: 1px;
}

.degree {
    font-size: 8px;
}

/* Footer */
.footer {
    color: rgba(255, 255, 255, 0.9);
    padding: 40px 16px;
    margin-top: auto;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 247" preserveAspectRatio="none"%3E%3Cpath fill="%231A2635" d="M-2 73.392 218.123 49.92l68.12 12.258h39.079l54.737-8.834L425.96 63.46l39.811-3.868 122.334-19.524 71.989-16.754 101.37 9.697 182.665-9.174L1138.16 0l89.98 23.314 53.32 12.415 70.61-29.195L1440 29.482V247H-2V73.392Z"/%3E%3C/svg%3E');
    background-size: calc(max(100%, 500px));
    background-position: top center;
    background-repeat: no-repeat;
    /* opacity: 0.4; */
    z-index: 0;
}

.footer-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
}


/* Tablet breakpoint (768px and up) */
@media (min-width: 768px) {
    .header {
        /* padding: 30px 40px 80px; */
        padding: 40px 80px 100px;
    }

    .header-trees {
        left: 40px;
    }

    .logo img {
        width: 200px;
    }
    .search-container {
        margin: 30px auto 32px;
        max-width: 600px;
    }

    .search-bar {
        padding: 14px 24px 14px 60px;
    }

    .section-title {
        margin: 0 40px 20px;
        padding-top: 20px;
        font-size: 18px;
    }

    .letter-heading {
        font-size: 48px;
        margin: 32px 40px 20px;
    }

    .resort-grid {
        padding: 0 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }
    .footer {
        min-height: 300px;
    }
    .footer-logo {
        margin-top: 0;
    }
}

/* Desktop breakpoint (1024px and up) */
@media (min-width: 1024px) {
    .header {
        padding: 40px 80px 100px;
    }

    .header-trees {
        left: 80px;
    }

    .logo {
        font-size: 32px;
    }

    .search-container {
        margin: 30px auto 40px;
        max-width: 700px;
    }

    .main-content {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        padding: 0 40px 60px;
    }

    .section-title {
        margin: 0 0 24px;
        padding-top: 24px;
        font-size: 18px;
    }

    .letter-heading {
        font-size: 48px;
        margin: 40px 0 24px;
    }

    .resort-grid {
        padding: 0;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .resort-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .resort-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .footer {
        padding: 60px 80px;
    }

    .footer-content {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
    .header {
        /* padding: 50px 120px 120px; */
        padding: 40px 80px 100px;
    }

    .header-trees {
        left: 120px;
    }

    .main-content {
        max-width: 1600px;
        padding: 0 80px 80px;
    }

    .footer {
        padding: 80px 120px;
    }

    .footer-content {
        max-width: 1600px;
    }
}

/* ===========================
   Page 2 - Detail Page Styles
   =========================== */

/* Hero section */
.hero-section {
    position: relative;
    width: 100%;
    height: 259px;
    overflow: hidden;
    z-index: 5;
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%,  rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 80%,rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* Hero controls */
.hero-controls {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.back-button {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.7);
    /* backdrop-filter: blur(10px); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hero-search {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 46px;
    /* padding: 6px 12px 6px 40px; */
    padding: 8px 16px 8px 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    max-width: 300px;
}

.hero-search .search-icon {
    position: absolute;
    left: 8px;
    width: 20px;
    height: 20px;
}

.hero-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: #494949;
    letter-spacing: -0.4px;
    width: 100%;
}

.hero-search input::placeholder {
    color: #989898;
}

/* Hero content */
.hero-content {
    position: absolute;
    bottom: 11px;
    left: 16px;
    right: 16px;
    z-index: 5;
}

.resort-title {
    font-size: 28px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
    /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); */
    /* text-shadow: 0 0px 42px rgba(0, 0, 50, 0.9), 0 1px 0 rgba(0, 0, 0, .45); */
    text-shadow: 0 0px 42px rgba(0, 0, 50, 0.9), 1px 1px 1px rgba(0, 0, 0, .45);
}

/* Location bar */
.location-bar {
    background: #1a2635;
    padding: 12px 16px;
    /* margin: -16px 16px 0; */
    /* margin: 0 40px 0; */
    margin: -6px 0 0;
    display: flex;
    align-items: left;
    justify-content: left;
    max-width: 1200px;
    /* margin-left: auto;
    margin-right: auto; */
    position: relative;
    z-index: 1;
}

.location-bar p {
    font-size: 14px;
    font-weight: 500;
    color: #a2adc0;
    letter-spacing: -0.5px;
    text-align: left;
}

/* Detail content */
.detail-content {
    padding: 24px 16px;
    max-width: 1200px;
    margin: 0 auto;
}


/* Info cards */
.info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.info-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: #494949;
    letter-spacing: -0.6px;
    margin: 0 0 12px 0;
}

/* Snow info */
.snow-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.info-card .divider {
    background: #E7ECF1;
    
}

.snow-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.snow-label {
    font-size: 18px;
    font-weight: 500;
    color: #989898;
    letter-spacing: -0.4px;
}

.snow-value {
    font-size: 32px;
    font-weight: 300;
    color: #1a2635;
    letter-spacing: -0.4px;
    text-align: right;
}

.snow-value .unit {
    font-size: 14px;
    font-weight: 500;
    margin-left: 4px;
}

.divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0;
}

/* Weather info */
.weather-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weather-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather-time {
    font-size: 18px;
    font-weight: 500;
    color: #989898;
    letter-spacing: -0.4px;
}

.weather-icon {
    width: 40px;
    height: 48px;
    margin-right: 20px;
}

.weather-bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.temp-label {
    font-size: 18px;
    font-weight: 500;
    color: #989898;
    letter-spacing: -0.4px;
}

.temp-value {
    font-size: 32px;
    font-weight: 300;
    color: #1a2635;
    letter-spacing: -0.4px;
}

/* Facts and Description wrapper */
.facts-description-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

/* Facts section */
.facts-section {
    flex: 1;
}

.facts-title {
    font-size: 20px;
    font-weight: 600;
    color: #494949;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.facts-grid {
    display: grid;
    grid-template-columns: auto auto;
    /* gap: 12px 180px; */
    gap: 12px 120px;
    
    align-items: center;
    width: fit-content;
}

.fact-row {
    display: contents;
}

.fact-label {
    font-size: 18px;
    font-weight: 600;
    color: #5a5a5a;
    letter-spacing: -0.4px;
    line-height: 33px;
}

.fact-value {
    font-size: 16px;
    font-weight: 600;
    color: #494949;
    letter-spacing: -0.4px;
    text-align: left;
    line-height: 33px;
}

.facts-section .status-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 8px 16px;
    border-radius: 55px;
}

.facts-section .status-badge.open {
    background-color: #b2f4a9;
    color: #478048;
}

.divider {
    height: 3px;
    background: #ffffff;
    margin: 0 0 32px 0;
}

/* Description section */
.description-section {
    flex: 1;
}

.description-text {
    font-size: 16px;
    font-weight: 400;
    color: #494949;
    line-height: 24px;
    letter-spacing: -0.4px;
}

/* Action buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.action-button {
    background: white;
    border-radius: 34px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-button span {
    flex: 1;
    font-size: 17px;
    font-weight: 500;
    color: #494949;
    letter-spacing: -0.6px;
}

.button-icon {
    flex-shrink: 0;
}

.arrow-icon {
    flex-shrink: 0;
    transform: rotate(270deg);
}

.bottom-divider {
    height: 0.5px;
    background: #e0e0e0;
    margin: 16px 0 32px;
}

/* Detail page adjustments */
.detail-page {
    background-color: #e7ecf1;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.detail-page .page-container {
    background: #e7ecf1;
}

/* Tablet breakpoint for detail page */
@media (min-width: 768px) {
    .hero-section {
        height: 350px;
    }

    .hero-controls {
        top: 24px;
        left: 40px;
        right: 40px;
    }

    /* .back-button {
        width: 48px;
        height: 48px;
    } */

    .hero-search {
        max-width: 300px;
        padding: 8px 16px 8px 48px;
    }

    .hero-search .search-icon {
        left: 12px;
        width: 20px;
        height: 20px;
    }

    .hero-search input {
        font-size: 16px;
    }

    .hero-content {
        bottom: 32px;
        left: 40px;
        right: 40px;
    }

    .resort-title {
        font-size: 48px;
    }

    .location-bar {
        padding: 12px 28px;
        margin: -6px 40px 0;
    border-radius: 0 0 12px 12px;

    }

    .detail-content {
        padding: 32px 40px;
    }

    .info-cards {
        
        gap: 20px;
        margin-bottom: 40px;
    }

    .info-card {
        padding: 20px;
    }

    .card-title {
        font-size: 18px;
        margin-bottom: 16px;
         font-weight: 700;
    }

    .action-buttons {
        flex-direction: row;
        gap: 20px;
    }

    .action-button {
        flex: 1;
    }
}

/* Desktop breakpoint for detail page */
@media (min-width: 1024px) {
    .hero-section {
        height: 450px;
    }

    .hero-controls {
        top: 32px;
        left: 80px;
        right: 80px;
    }

    /* .back-button {
        width: 56px;
        height: 56px;
    } */

    .hero-search {
        max-width: 250px;
        padding: 10px 20px 10px 56px;
    }

    .hero-search .search-icon {
        left: 16px;
        width: 24px;
        height: 24px;
    }
.weather-icon {
    width: 40px;
    height: 60px;
}
    .hero-search input {
        font-size: 16px;
    }

    .hero-content {
        bottom: 32px;
        left: 80px;
        right: 80px;
    }

    .resort-title {
        font-size: 48px;
    }

    .location-bar {
        /* padding: 16px 80px; */
        margin: -6px 80px 0;
        max-width: 1400px;
    }

    .location-bar p {
        font-size: 16px;
    }

    .detail-content {
        padding: 48px 80px;
        max-width: 1400px;
    }

    .info-cards {
        gap: 24px;
        margin-bottom: 48px;
    }

    .info-card {
        padding: 24px;
    }

    .card-title {
        font-size: 20px;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .snow-value,
    .temp-value {
        font-size: 40px;
    }

    /* Two-column layout for facts and description */
    .facts-description-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* gap: 48px; */
        align-items: start;
    }

    .description-text {
        font-size: 18px;
        line-height: 28px;
    }

    .action-button span {
        font-size: 18px;
    }
}

/* Large desktop for detail page */
@media (min-width: 1440px) {
    .hero-section {
        height: 500px;
    }

    .hero-controls {
        left: 120px;
        right: 120px;
    }

    .hero-content {
        left: 120px;
        right: 120px;
    }

    .location-bar {
        /* padding: 16px 120px; */
        margin: -6px 120px 0;
        max-width: 1600px;
    }

    .detail-content {
        padding: 64px 120px;
        max-width: 1600px;
    }
}