/* The Grid Container - Creates the zig-zag layout */
.lb-story-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 Column Grid */
    /* We define two specific rows to control the height */
    grid-template-rows: auto auto;
    align-items: start;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: var(--spacing-xl, 3rem);
    position: relative;
}

/* 1. Tall Background Image (Left) */
/* It spans from the very top to the bottom (Row 1 to 3) */
.lb-image-back {
    grid-column: 1 / 5;
    grid-row: 1 / 3;     /* Spans BOTH rows so it stands tall */
    z-index: 1;
}

.lb-image-back img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 2. Title "Our Story" */
/* It sits in the Top Row, to the right of the tall image */
.lb-title {
    grid-column: 6 / 13;
    grid-row: 1;         /* Top Row */
    font-size: clamp(4rem, 6rem + 4vw, 8.5rem);   /* Responsive title size */
    font-weight: 700;    /* Make title bold */
    line-height: 1;
    color: var(--color-text-primary, #010101);
    margin: 120px 0 20px 0; /* Pull title up more */
    z-index: 3;
}

/* 3. Wide Front Image (Hat) */
/* It sits in the Bottom Row, overlapping the first image slightly */
.lb-image-front {
    grid-column: 3 / 7;
    grid-row: 2;         /* Bottom Row */
    z-index: 2;          /* Sits on top */
    margin-top: 50px;   /* Move foreground image up a bit */
}

.lb-image-front img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 4. Paragraph Text */
/* It sits in the Bottom Row, far right */
.lb-text {
    grid-column: 8 / 13;
    grid-row: 2;         /* Bottom Row */
    margin-top: 35px;   /* Push text down much more */
    z-index: 3;
}

/* Target paragraphs directly within the story text container */
.lb-text p,
.lb-text .lb-paragraph {
    font-size: var(--irmanha-body);
    font-weight: var(--irmanha-font-weight-normal, 400);
    line-height: var(--line-height-relaxed, 1.6);
    margin-bottom: var(--spacing-md, 1.5rem);
    color: var(--color-text-primary, #010101);
    text-align: left;
}

/* Tablet font size adjustments for better readability */
@media (max-width: 1024px) {
    .lb-text p,
    .lb-text .lb-paragraph {
        font-size: var(--irmanha-body-tablet) !important; /* 22px */
    }
}

/* Mobile font size overrides for better readability */
@media (max-width: 768px) {
    .lb-text p,
    .lb-text .lb-paragraph {
        font-size: var(--irmanha-body-mobile) !important; /* 16px */
    }
}

@media (max-width: 480px) {
    .lb-text p,
    .lb-text .lb-paragraph {
        font-size: var(--irmanha-body-mobile) !important;
    }
}

.lb-paragraph:last-child {
    margin-bottom: 0;
}

/* Drop Cap Styling */
.lb-dropcap {
    font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.575rem);   /* Responsive dropcap */
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary, #010101);
    font-family: inherit;
}

/* --- Tablet View (Side by side images, text below) --- */
@media (max-width: 1024px) {
    .lb-story-grid {
        display: grid; /* Keep grid layout */
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto; /* Title row, Images row, Text row */
        row-gap: 0; /* Remove gap to control spacing with margin */
        column-gap: 15px; /* Keep horizontal gap */
        padding: 0 20px;
    }

    /* Title spans full width in first row */
    .lb-title {
        grid-column: 1 / 13; /* Full width */
        grid-row: 1; /* First row */
        font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* Responsive font size for tablets */
        margin: 5px 0 20px; /* Reduced top margin */
        text-align: center; /* Center title on tablets */
    }

    /* Images side by side in second row */
    .lb-image-back {
        grid-column: 1 / 7; /* Left half for background image */
        grid-row: 2; /* Second row */
    }

    .lb-image-front {
        grid-column: 7 / 13; /* Right half for front image */
        grid-row: 2; /* Second row */
        margin-top: 0; /* Reset margin for side-by-side layout */
    }

    /* Text spans full width in third row */
    .lb-text {
        grid-column: 1 / 13; /* Full width */
        grid-row: 3; /* Third row */
        margin-top: 20px; /* Add precise spacing */
        text-align: left; /* Left align text on tablets */
    }

    /* Paragraph and dropcap now use clamp() for smooth scaling */
    .lb-paragraph {
        text-align: left; /* Keep left alignment for readability */
    }
}

/* --- Mobile/Tablet View (Images side by side when possible) --- */
@media (max-width: 768px) {
    .lb-story-grid {
        display: grid; /* Use grid instead of flex for better control */
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto; /* Title row, Images row, Text row */
        row-gap: 0; /* Remove gap to control spacing with margin */
        column-gap: 20px; /* Keep horizontal gap */
        padding: 0 15px;
    }

    /* Title spans full width */
    .lb-title {
        grid-column: 1 / 13;
        grid-row: 1;
        text-align: center;
        font-size: clamp(3rem, 2.5rem + 3vw, 4rem);
        margin: 15px 0 20px; /* Reduced top margin */
    }

    /* Try to put images side by side on larger mobile screens */
    .lb-image-back {
        grid-column: 1 / 7; /* Left half */
        grid-row: 2;
        width: 100%;
    }

    .lb-image-front {
        grid-column: 7 / 13; /* Right half */
        grid-row: 2;
        width: 100%;
        margin-top: 0; /* Reset margin */
    }

    /* Text spans full width */
    .lb-text {
        grid-column: 1 / 13;
        grid-row: 3;
        margin-top: 20px; /* Add precise spacing */
        text-align: left;
    }

    .lb-paragraph {
        text-align: left; /* Keep left alignment for readability */
    }
}

/* --- Small Mobile View (Same as tablet: side-by-side images) --- */
@media (max-width: 480px) {
    .lb-story-grid {
        display: grid; /* Same grid layout as tablet */
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto; /* Title row, Images row, Text row */
        row-gap: 0; /* Remove gap to control spacing with margin */
        column-gap: 15px; /* Keep horizontal gap */
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Title spans full width */
    .lb-title {
        grid-column: 1 / 13;
        grid-row: 1;
        text-align: center;
        font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* Much bigger on mobile */
        margin: 15px 0 20px; /* Add margin-bottom */
    }

    /* Images side by side even on small screens */
    .lb-image-back {
        grid-column: 1 / 7; /* Left half */
        grid-row: 2;
        width: 100%;
    }

    .lb-image-front {
        grid-column: 7 / 13; /* Right half */
        grid-row: 2;
        width: 100%;
        margin-top: 0; /* Reset margin */
    }

    /* Text spans full width */
    .lb-text {
        grid-column: 1 / 13;
        grid-row: 3;
        margin-top: 20px; /* Add precise spacing */
        text-align: left;
    }

    .lb-paragraph {
        text-align: left; /* Keep left alignment for readability */
    }
}

/* Accessibility and Focus States */
@media (prefers-reduced-motion: reduce) {
    .lb-image-back img,
    .lb-image-front img {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lb-image-back img,
    .lb-image-front img {
        border: 2px solid;
    }
}

/* Print styles */
@media print {
    .lb-story-grid {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }

    .lb-image-back img,
    .lb-image-front img {
        position: static;
        width: 100%;
        margin-bottom: 1rem;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .lb-title {
        font-size: var(--irmanha-h2);
        margin-bottom: 1rem;
    }

    .lb-paragraph {
        font-size: var(--irmanha-body);
        line-height: 1.4;
    }
}