/* ---------------------------- HOME PAGE LAYOUT OVERRIDE -------------------- */

.page-home main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "slider slider slider slider"
        "intro1 intro1 intro2 intro3"
        "articles articles articles sidebar-area"
        "articles articles articles sidebar-area";
    gap: var(--block-gap-narrow) var(--block-gap-narrow);
}

@media (max-width: 1000px) {
    /* Tablet layout */
    .page-home main {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "slider slider"
            "intro1 intro1"
            "intro2 intro3"
            "articles articles"
            "sidebar-area sidebar-area";
    }
}

@media (max-width: 633px) {
    /* Mobile layout */
    .page-home main {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "slider"
            "intro1"
            "intro2"
            "intro3"
            "articles"
            "sidebar-area";
    }
}

/* Allows grid items to shrink below their content's intrinsic minimum width, preventing the grid from forcing horizontal overflow: */
.page-home main > * {
    min-width: 0; /* Required for mobile layout */
    align-self: start;
}

.slider-section {
    grid-area: slider;
}

.intro1 {
    grid-area: intro1;
}

.intro2 {
    grid-area: intro2;
}

.intro3 {
    grid-area: intro3;
}

.articles {
    grid-area: articles;
}


/* Break out to parent container edges */

.slider-section {
    /* Negative margins to counteract content padding */
    margin-left: -60px;
    margin-right: -60px;
}

/* Restore padding for text content only */
.slider-section .home-motto,
.slider-section .home-title {
    padding-left: 60px;
    padding-right: 60px;
}

/* Responsive adjustments */
@media (max-width: 1000px) {
    .slider-section {
        margin-left: -30px;
        margin-right: -30px;
    }

    .slider-section .home-motto,
    .slider-section .home-title {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* ---------------------------- HOME PAGE SPECIFIC STYLES -------------------- */

.slider-section {
    padding: 0;
    text-align: center;
}

.swiper-pagination-bullet-active {
    background-color: var(--brown-tint-50);
}

.swiper {
    padding-bottom: 10px;
}

/* Move pagination 38px higher from bottom */
.slider-section .swiper-pagination {
    --swiper-pagination-bottom: -5px; /* 8px default + 38px extra */
}

.intro {
    background-color: var(--main-tan-overlay-color);
    margin-bottom: var(--block-gap-wide);
    text-align: center;
    padding: 15px 0;
}

.intro h2 {
    color: var(--brown-tint-40);
    padding: 15px 10px 8px 10px;
    margin: 0;
}

.intro p {
    padding: 0 12px;
    margin: 0;
    font-style: italic;
}

@media (max-width: 1000px) {
    .intro1 {
        margin-bottom: 0;
    }
}

@media (max-width: 633px) {
    .intro2 {
        margin-bottom: 0;
    }

    .intro3 {
        margin-bottom: 0;
    }
}

.home-motto {
    font-family: "LobsterTwo", serif;
    text-align: center;
    color: var(--main-bg-tan-color);
    font-size: 1.4rem;
}

.home-title {
    font-family: "LobsterTwo", serif;
    text-align: center;
    color: var(--brown-tint-40);
    font-size: clamp(1.875rem, 2.646vw + 0.828rem, 2.813rem);
    line-height: clamp(2.063rem, 2.116vw + 1.225rem, 2.813rem);
    padding: 0 1rem 1rem 1rem;
}

.home-title span {
    color: #e4d1b9;
    line-height: 0;
}

.home-title-quote {
    display: inline-block;
    font-size: clamp(3.125rem, 2.116vw + 2.288rem, 3.875rem);
    line-height: clamp(3.438rem, 1.235vw + 2.949rem, 3.875rem);
    color: var(--main-bg-soft-color);
}

.home-title-quote-end {
    position: relative;
    top: .15em;
}