/* --- styles.css content --- */

body {
    font-family: "Times New Roman", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f8f8f8;
    color: #333;
    font-size: 12px;
}

.container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #5d4037;
    border-bottom: 2px solid #5d4037;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
}

/* GRID STYLES FOR IMAGE AND CAPTION LAYOUT (APPLIES TO ALL SCREEN SIZES) */
.grid-row {
    display: grid;
    /* Column 1: Image. Column 2: Text */
    grid-template-columns: minmax(150px, 100px) 1fr;
    gap: 20px;
    padding: 20px 0;
    align-items: center;
    margin: 0 auto;
    max-width: 800px;
}

.image-group-container {
    grid-column: 1 / 2;
    text-align: center;
}

.caption-text {
    grid-column: 2 / 3;
    font-style: italic;
    font-size: 13px;
}

/* --- NEW GRID FOR FINAL TEXT/IMAGE (DESKTOP) --- */
.final-row {
    display: grid;
    /* Text (2fr) | Image/Signature Group (1fr) */
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    padding: 20px 0;
    margin: 0 auto;
    max-width: 800px;
    /* VERTICALLY CENTERS THE IMAGE/SIGNATURE GROUP AGAINST THE TEXT */
    align-items: center;
}

/* Text block for the closing words */
.final-text-content {
    font-style: normal;
    grid-column: 1 / 2;
}

/* Group container for the Image and Signature */
.final-image-and-signature-group {
    grid-column: 2 / 3;
    /* Stacks the image above the signature on desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image styling for the final image */
.final-image-container {
    width: 100%; /* Image takes full width of its 1fr column */
    margin-bottom: 10px; /* Space between image and signature */
}

.final-image {
    display: block;
    width: 100%;
    height: auto;
}
/* ------------------------------------- */

/* --- IMAGE PROTECTION (ANTI-THEFT) --- */
/* Disables right-click (long-press on mobile) and prevents dragging/selection on all images */
.main-image,
.green-left,
.green-right-top,
.green-right-bottom,
.extra-image,
.final-image {
    user-select: none;
    pointer-events: none;
}
/* ------------------------------------- */


/* IMAGE SIZING (SIMPLE: 100% of the grid cell) */
.main-image, .green-grid, .extra-image {
    display: block;
    width: 100%;
    height: auto;
}

/* GREEN GROUP — internal grid layout (three images) */
.green-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.green-left {
    grid-row: 1 / span 2;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.green-right-top,
.green-right-bottom {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* NEW CLASSES FOR EXTRACTED INLINE STYLES */

.caption-heading {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 3px;
    font-style: normal;
}

.caption-paragraph {
    margin: 0;
}

/* STYLES FOR FINAL TEXT BLOCK (Konstnärens slutord) */
.final-heading {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
    font-style: normal;
}

.final-paragraph {
    margin: 0;
    font-style: normal;
}

.final-signature {
    margin: 0; /* Override previous margin */
    font-style: normal;
    text-align: center; /* Default center for desktop */
}


/* --- START OF MOBILE RESPONSIVE STYLES --- */
@media (max-width: 600px) {
    /* 1. Main layout: Stacks image above caption */
    .grid-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .image-group-container {
        grid-column: 1 / 2;
    }

    /* 2. Default Alignment: Centers all .caption-text (for poetry) */
    .caption-text {
        grid-column: 1 / 2;
        text-align: center;
    }

    /* ---------------------------------------------------- */
    /* Mobile Custom Layout: Stacked Text | Side-by-Side Image & Signature */
    /* ---------------------------------------------------- */
    .final-row {
        /* Stack the two main blocks (Text on top, Image/Signature on bottom) */
        grid-template-columns: 1fr;
        gap: 0; /* Reset gap */
    }

    /* 1. Closing Words (Main Text Block) */
    .final-text-content {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        text-align: left; /* Left-aligned */
        padding-bottom: 20px; /* Space before image/signature */
    }

    .final-heading,
    .final-paragraph {
        text-align: left; /* Ensure all text is left-aligned */
    }

    /* 2. Image and Signature Group (The custom side-by-side block) */
    .final-image-and-signature-group {
        grid-column: 1 / 2;
        grid-row: 2 / 3;

        /* Set up the inner grid for Image | Signature */
        display: grid;
        grid-template-columns: auto auto; /* Image and Signature take only their required space */

        gap: 5px; /* Space between the two elements */

        justify-content: center;
        width: 100%;
    }

    /* Position Image on Left of the Group */
    .final-image-container {
        grid-column: 1 / 2;
        margin-bottom: 0;
        width: auto;
    }

    /* Position Signature on Right of the Group */
    .final-signature {
        grid-column: 2 / 3;
        text-align: left;
        align-self: center; /* Vertically center signature to the image */
    }

    /* Adjust final image size and add centering */
    .final-image {
        max-width: 80px;
        width: auto;
        margin: 0 auto;
        display: block;
    }
}