/* Base styles for all screen sizes */
.background-container {
    background-image: url("/static/imgs/borsiis_dash/seleccion capitulos/fondo general movil.92d17a69412a.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    /* Ensure proper stacking context */
    display: block;
    /* Use normal document flow */
    /* No height constraint for mobile */
}

/* Header Section */
.header-container {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    /* Use padding instead of fixed height */
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.header-main-title {
    font-size: 3rem;
    text-align: center;
    margin: 0;
    /* Remove default margin */
}

/* Main Content Section - simply below the header */
.main-container {
    width: 100%;
    display: block;
    /* Use regular block display to occupy real space */
    padding: 2rem 0;
    position: relative;
    /* Create stacking context for children */
}

.main-container .margin-container {
    width: 100%;
    display: block;
    /* Normal document flow */
    max-width: 1200px;
    /* Maximum width for large screens */
    margin: 0 auto;
    /* Center the container */
}

/* Story Cards Container */
.header-story-cards-container {
    display: flex;
    flex-direction: column;
    /* Cards stacked in mobile view */
    gap: 2rem;
    /* Space between cards */
    align-items: center;
    width: 100%;
    padding: 2rem 0 3rem;
    /* Add padding to ensure proper spacing */
}

/* Individual Story Card */
.header-story-card {
    position: relative;
    border-radius: 10px;
    height: auto;
    width: 80%;
    /* Width in mobile */
    max-width: 320px;
    margin: 0 auto 1.5rem;
    /* Center horizontally with bottom margin */
    z-index: 1;
}

.header-story-card-link {
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    height: 100%;
}

.header-story-card-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

/* Title container positioned to cross the top border */
.header-story-title-container {
    position: absolute;
    top: -15px;
    /* Position higher to cross top border */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 80%;
    text-align: center;
}

.header-story-title-background {
    width: 100%;
    height: auto;
}

.header-story-card-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Read button styling */
.read-button-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    text-align: center;
}

.read-button-background {
    width: 100%;
    height: auto;
}

.read-button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Small screens optimization */
@media (max-height: 600px) {
    .header-container {
        padding: 1.5rem 0;
    }

    .header-main-title {
        font-size: 2.5rem;
    }

    .header-story-card-title {
        font-size: 1.2rem;
    }

    .read-button-text {
        font-size: 1rem;
    }

    .header-story-cards-container {
        gap: 1.5rem;
        padding: 1.5rem 0 2rem;
    }
}

/* Medium-small screens */
@media (min-width: 534px) {
    .header-story-card-title {
        font-size: 1.8rem;
    }

    .read-button-text {
        font-size: 1.4rem;
    }
}

/* Tablet layout */
@media (min-width: 768px) {
    .background-container {
        background-image: url("/static/imgs/borsiis_dash/seleccion capitulos/fondo general tablet.28e616555918.webp");
        height: 100vh;
        /* Full viewport height for tablet */
        overflow: hidden;
        /* Prevent scrolling within the container */
        display: flex;
        flex-direction: column;
    }

    .header-container {
        padding: 2.5rem 0;
        height: 20vh;
        /* 20% of viewport height */
    }

    .main-container {
        flex: 1;
        /* Take remaining height */
        overflow-y: auto;
        /* Allow scrolling inside main container */
        padding: 0;
    }

    .header-content {
        width: 70%;
        max-width: 800px;
        margin: 0 auto;
    }

    .header-main-title {
        font-size: 3.5rem;
    }

    /* Horizontal row layout with exactly 3 cards */
    .header-story-cards-container {
        flex-direction: row;
        flex-wrap: nowrap;
        /* Prevent wrapping to second line */
        justify-content: center;
        gap: 1.5rem;
        /* Reduced gap to fit all 3 cards */
        padding: 2rem 1rem;
        margin: auto;
        /* Center vertically in the remaining space */
        width: 100%;
        max-width: 950px;
        /* Control maximum width to avoid overflow */
    }

    .header-story-card {
        width: calc(33.33% - 1rem);
        /* Equal width distribution for 3 cards */
        min-width: 0;
        /* Remove min-width to allow shrinking */
        max-width: none;
        /* Allow cards to adapt to container */
        margin: 1.5rem 0;
        /* Vertical space for title */
        flex: 1;
        /* Make cards take equal space */
    }

    .header-story-card-title {
        font-size: 2rem;
    }

    .header-story-title-container {
        width: 80%;
    }

    .read-button-container {
        width: 70%;
    }

    .read-button-text {
        font-size: 1.6rem;
    }
}

/* Adjustments for smaller tablets */
@media (min-width: 768px) and (max-width: 900px) {
    .header-story-cards-container {
        gap: 1rem;
        /* Smaller gap for smaller tablets */
    }

    .header-story-card-title {
        font-size: 1.6rem;
        /* Smaller font size */
    }

    .read-button-text {
        font-size: 1.4rem;
    }
}

/* Desktop layout */
@media (min-width: 1524px) {
    .background-container {
        background-image: url("/static/imgs/borsiis_dash/seleccion capitulos/fondo general pc.de7f3dce2235.webp");
        height: 100vh;
        /* Full viewport height for desktop */
    }

    .header-container {
        height: 20vh;
        /* Exactly 20% of viewport height */
    }

    .header-content {
        width: 60%;
        max-width: 1000px;
    }

    .header-main-title {
        font-size: 4rem;
    }

    .main-container {
        flex: 1;
        /* Take remaining 80% of viewport height */
        overflow-y: auto;
        /* Allow scrolling within main */
    }

    .header-story-cards-container {
        gap: 3rem;
        /* More generous spacing for desktop */
        padding: 2rem;
        margin: auto;
        /* Center vertically */
        max-width: 1200px;
        /* Larger max-width for desktop */
    }

    .header-story-card {
        width: calc(33.33% - 2rem);
        /* Maintain equal width distribution */
        min-width: 0;
        /* Let cards size naturally */
        max-width: 320px;
        /* Maximum card width */
        margin: 1.5rem 0.5rem;
        /* More evenly spaced */
    }

    .header-story-card-title {
        font-size: 2.2rem;
    }

    .header-story-title-container {
        top: -18px;
        /* Position to properly cross the border */
    }

    .read-button-container {
        width: 60%;
        bottom: 15px;
    }

    .read-button-text {
        font-size: 1.8rem;
    }
}