/* Specific styles for Calva Lodge, Carrock Lodge, Things to Do, and Find Us pages */

.page-hero {
    height: 60vh; /* Shorter hero for internal pages */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    position: relative;
    margin-top: 80px; /* Adjust for fixed header */
    box-shadow: inset 0 -100px 100px rgba(0, 0, 0, 0.4); /* Subtle gradient for text readability */
}

.page-hero-content {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 30px 50px;
    border-radius: 10px;
    max-width: 800px;
}

.page-hero-content h2 {
    font-size: 3em;
    color: var(--white);
    margin-bottom: 15px;
}

.page-hero-content p {
    font-size: 1.3em;
    color: var(--white);
    font-weight: 300;
}

/* Lodge Details Section */
.lodge-details .container {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 40px;
}

.content-section p{padding-bottom:1em;}

@media (min-width: 768px) {
    .lodge-details .container {
        grid-template-columns: 2fr 1fr; /* Description on left, Amenities on right */
        grid-template-areas:
            "gallery gallery"
            "description amenities";
    }

    .lodge-gallery {
        grid-area: gallery;
    }

    .lodge-description {
        grid-area: description;
    }

    .lodge-amenities {
        grid-area: amenities;
    }
}

.lodge-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.lodge-gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.lodge-gallery img:hover {
    transform: scale(1.02);
}

.lodge-description p {
    margin-bottom: 20px;
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--slate-gray);
}

.lodge-amenities {
    background-color: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.lodge-amenities h3 {
    color: var(--olive-green);
    margin-bottom: 25px;
    text-align: center;
}

.lodge-amenities ul {

    padding: 0;
}

.lodge-amenities ul li {
    margin-bottom: 15px;
    font-size: 1.05em;
    color: var(--text-color);
}

.lodge-amenities ul li i {
    color: var(--olive-green);
    margin-right: 15px;
    width: 25px; /* Align icons */
    text-align: center;
}

/* Things to do page specific */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.activity-card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.activity-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.activity-card h4 {
    font-size: 1.5em;
    color: var(--navy);
    margin: 20px 20px 10px;
}

.activity-card p {
    padding: 0 20px 20px;
    color: var(--slate-gray);
    line-height: 1.6;
}

.additional-info {
    margin-top: 60px;
    text-align: center;
}

.additional-info p {
    margin-bottom: 30px;
    font-size: 1.1em;
    color: var(--slate-gray);
}

/* Find Us Page Specific */
.two-column-row {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 40px; /* Space between columns */
    margin-bottom: 60px;
    align-items: flex-start; /* Align content to the top of the row */
}

.col-60, .col-40 {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    background-color: #f8f8f8;
}

.col-60 {
    flex-basis: calc(60% - 20px); /* 60% width minus half of the gap */
    max-width: calc(60% - 20px);
}

.col-40 {
    flex-basis: calc(40% - 20px); /* 40% width minus half of the gap */
    max-width: calc(40% - 20px);
}

@media (max-width: 992px) {
    .col-60, .col-40 {
        flex-basis: 100%; /* Stack columns on smaller screens */
        max-width: 100%;
    }
}

.contact-form-wrapper h4,
.intro-text h4,
.google-map h4,
.directions-details h4 {
    color: var(--olive-green);
    font-size: 1.6em;
    margin-bottom: 25px;
    text-align: center;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--navy);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--slate-gray);
    border-radius: 5px;
    font-family: var(--body-font);
    font-size: 1em;
    background-color: var(--white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: var(--olive-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(84, 89, 39, 0.2);
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
}

.intro-text p, .intro-text address p,
.directions-details p, .directions-details ol li {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--slate-gray);
    margin-bottom: 15px;
}

.intro-text address {
    font-style: normal; /* Override default italic for address */
    margin-top: 20px;
    margin-bottom: 20px;
}

.intro-text address p i,
.directions-details p i {
    color: var(--olive-green);
    margin-right: 15px;
    width: 25px;
    text-align: center;
}

.directions-details ol {
    list-style-type: decimal;
    padding-left: 25px;
}

.directions-details ol li {
    margin-bottom: 10px;
    padding-left: 5px;
}

.google-map {
    height: 450px; /* Set a fixed height for the map container */
    overflow: hidden; /* Ensure iframe stays within bounds */
    padding: 0; /* Remove padding if added by default .col-60 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Keep map shadow */
    display: flex; /* To center title */
    flex-direction: column; /* To stack title and iframe */
}

.google-map iframe {
    width: 100%;
    height: 100%; /* Fill the height of its parent .google-map */
    border: none;
    border-radius: 10px; /* Apply border-radius to iframe */
}

/* Adjust title for google map */
.google-map h4 {
    padding: 30px; /* Add padding similar to other columns */
    margin-bottom: 0; /* Remove default margin-bottom */
    background-color: #f8f8f8; /* Match background of other cols */
    border-top-left-radius: 10px; /* Apply radius only to top */
    border-top-right-radius: 10px;
    box-shadow: none; /* Remove shadow to prevent doubling */
}

.map-and-directions-row {
    margin-top: 0; /* Remove top margin if it creates double spacing */
}

.map-and-directions-row .col-60,
.map-and-directions-row .col-40 {
    box-shadow: none; /* Remove default column shadow, as map has its own and directions should match */
    padding: 0; /* Remove default column padding */
}

.map-and-directions-row .directions-details {
    padding: 30px; /* Re-add padding specifically to directions text */
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Add shadow back to directions text */
}

/* General responsive adjustments for pages */
@media (max-width: 768px) {
    .page-hero {
        height: 50vh;
    }

    .page-hero-content h2 {
        font-size: 2.5em;
    }

    .page-hero-content p {
        font-size: 1.1em;
    }

    .lodge-details .container {
        grid-template-columns: 1fr; /* Stack on smaller screens */
        grid-template-areas:
            "gallery"
            "description"
            "amenities";
    }

    .lodge-gallery {
        margin-bottom: 20px;
    }

    /* Column stacking for find us page */
    .two-column-row {
        flex-direction: column;
        gap: 30px; /* Smaller gap when stacked */
    }

    .col-60, .col-40 {
        padding: 25px; /* Slightly less padding on mobile */
    }

    .contact-form-wrapper,
    .intro-text,
    .google-map,
    .directions-details {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0; /* Handled by row gap */
    }

    .google-map {
        height: 350px; /* Shorter map on mobile */
    }

    .google-map h4 {
        padding: 25px;
    }

    .map-and-directions-row .directions-details {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .page-hero {
        height: 40vh;
    }

    .page-hero-content h2 {
        font-size: 2em;
    }

    .page-hero-content p {
        font-size: 1em;
    }

    .lodge-gallery {
        grid-template-columns: 1fr;
    }

    .activity-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper h4,
    .intro-text h4,
    .google-map h4,
    .directions-details h4 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px;
        font-size: 0.95em;
    }

    .intro-text p, .intro-text address p,
    .directions-details p, .directions-details ol li {
        font-size: 0.95em;
    }

    .google-map {
        height: 300px;
    }
}