/**
 * Modern Homepage Tiles - CSS Grid Implementation
 * SUREFLAP-2248: Homepage tile layout modification
 *
 * Features:
 * - CSS Grid for flexible layouts
 * - Per-store customization via CSS classes
 * - Responsive design (mobile-first)
 * - Support for 2-5 tile configurations
 * - Video tile ready
 */

/* ==========================================================================
   Base Grid Container
   ========================================================================== */

.homepage-tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(200px, auto);
    margin: 0 auto;
    max-width: 2000px;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

/* ==========================================================================
   Individual Tile Styling
   ========================================================================== */

.homepage-tile {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: block;
    text-decoration: none;
    background-color: #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 200px;
}

.homepage-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.homepage-tile:focus {
    outline: 3px solid #0099a8;
    outline-offset: 2px;
}

/* ==========================================================================
   Tile Media (Image/Video)
   ========================================================================== */

.homepage-tile__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.homepage-tile__image,
.homepage-tile__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.homepage-tile__video {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Faster fade (500ms instead of 1s) */
    pointer-events: none;
}

.homepage-tile__video.video-active {
    opacity: 1;
}

/* Third tile (Felaqua) - image positioning.
   Scoped to en-gb on purpose. This top-anchors the crop for one specific UK
   Felaqua image, and used to be harmless because this stylesheet was only
   loaded by the /tile-update preview page. Now that every non-UK store renders
   through this grid, an unscoped rule would top-anchor tile 3 in all 21
   five-tile markets - tile 3's slot is ~2.37:1 against ~3:2 sources, so
   object-fit: cover crops vertically and 'center 0px' keeps the top of the
   frame (background/sky) instead of the subject. */
.homepage-tiles--en-gb > .homepage-tile:nth-child(3) .homepage-tile__image {
    object-position: center 0px;
}

/* ==========================================================================
   Tile Overlay & Text
   ========================================================================== */

.homepage-tile__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: table;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.7) 100%
    );
    color: white;
    transition: background 0.3s ease;
}

.homepage-tile:hover .homepage-tile__overlay {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

.homepage-tile__content {
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding: 40px 0 20px 0;
}

.homepage-tile__title {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    color: white;
    text-shadow: none;
}

.homepage-tile__subtitle {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    color: white;
    text-shadow: none;
    display: none; /* Hidden by default, shown on mobile */
}

/* ==========================================================================
   Layout: 5 Tiles (Default - All Stores except UK)
   ========================================================================== */

.homepage-tiles--5-tiles > .homepage-tile:nth-child(1) {
    grid-area: 1 / 1 / 3 / 4; /* Row 1-3, Col 1-4: 50% width, 2 rows tall */
}

.homepage-tiles--5-tiles > .homepage-tile:nth-child(2) {
    grid-area: 1 / 4 / 3 / 7; /* Row 1-3, Col 4-7: 50% width, 2 rows tall */
}

.homepage-tiles--5-tiles > .homepage-tile:nth-child(3) {
    grid-area: 3 / 1 / 4 / 3; /* Row 3-4, Col 1-3: 33% width */
}

.homepage-tiles--5-tiles > .homepage-tile:nth-child(4) {
    grid-area: 3 / 3 / 4 / 5; /* Row 3-4, Col 3-5: 33% width */
}

.homepage-tiles--5-tiles > .homepage-tile:nth-child(5) {
    grid-area: 3 / 5 / 4 / 7; /* Row 3-4, Col 5-7: 33% width */
}

/* ==========================================================================
   Layout: 3 Tiles
   ========================================================================== */

/* Generic 3-tile layout for any store: full-width hero + two half-width tiles.
   Without this, a 3-tile store falls through to the 6-column default and gets
   three narrow tiles with half the row empty. Tile counts come from admin
   (Internationalisation), so any store can end up on this layout. */
.homepage-tiles--3-tiles > .homepage-tile:nth-child(1) {
    grid-area: 1 / 1 / 3 / 7; /* Full width hero */
    min-height: 400px;
}

.homepage-tiles--3-tiles > .homepage-tile:nth-child(2) {
    grid-area: 3 / 1 / 4 / 4; /* 50% width */
    min-height: 250px;
}

.homepage-tiles--3-tiles > .homepage-tile:nth-child(3) {
    grid-area: 3 / 4 / 4 / 7; /* 50% width */
    min-height: 250px;
}

/* UK store keeps the same shape regardless of how many tiles admin defines. */
.homepage-tiles--en-gb.homepage-tiles--3-tiles > .homepage-tile:nth-child(1),
.homepage-tiles--en-gb > .homepage-tile:nth-child(1) {
    grid-area: 1 / 1 / 3 / 7; /* Full width hero */
    min-height: 400px;
}

.homepage-tiles--en-gb.homepage-tiles--3-tiles > .homepage-tile:nth-child(2),
.homepage-tiles--en-gb > .homepage-tile:nth-child(2) {
    grid-area: 3 / 1 / 4 / 4; /* 50% width */
    min-height: 250px; /* +50px extra height */
}

.homepage-tiles--en-gb.homepage-tiles--3-tiles > .homepage-tile:nth-child(3),
.homepage-tiles--en-gb > .homepage-tile:nth-child(3) {
    grid-area: 3 / 4 / 4 / 7; /* 50% width */
    min-height: 250px; /* +50px extra height */
}

/* Hide extra tiles for UK store */
.homepage-tiles--en-gb > .homepage-tile:nth-child(n+4) {
    display: none;
}

/* ==========================================================================
   Layout: 4 Tiles
   ========================================================================== */

.homepage-tiles--4-tiles > .homepage-tile:nth-child(1) {
    grid-area: 1 / 1 / 3 / 5; /* 66% width, 2 rows tall */
}

.homepage-tiles--4-tiles > .homepage-tile:nth-child(2) {
    grid-area: 1 / 5 / 2 / 7; /* 33% width, 1 row */
}

.homepage-tiles--4-tiles > .homepage-tile:nth-child(3) {
    grid-area: 2 / 5 / 3 / 7; /* 33% width, 1 row */
}

.homepage-tiles--4-tiles > .homepage-tile:nth-child(4) {
    grid-area: 3 / 1 / 4 / 7; /* Full width */
}

/* ==========================================================================
   Layout: 2 Tiles
   ========================================================================== */

/* Two rows tall, like the hero in every other layout. Spanning a single row
   pins these to grid-auto-rows' 200px, which letterboxes tile images that are
   ~3:2 (800x533) into a 3.58:1 strip and crops the subject out. */
.homepage-tiles--2-tiles > .homepage-tile:nth-child(1) {
    grid-area: 1 / 1 / 3 / 4; /* 50% width, 2 rows tall */
}

.homepage-tiles--2-tiles > .homepage-tile:nth-child(2) {
    grid-area: 1 / 4 / 3 / 7; /* 50% width, 2 rows tall */
}

/* ==========================================================================
   Tablet Breakpoint (768px - 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .homepage-tiles {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
        grid-auto-rows: minmax(180px, auto);
    }

    /* 5 tiles on tablet */
    .homepage-tiles--5-tiles > .homepage-tile:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3; /* 50% width */
    }

    .homepage-tiles--5-tiles > .homepage-tile:nth-child(2) {
        grid-area: 1 / 3 / 3 / 5; /* 50% width */
    }

    .homepage-tiles--5-tiles > .homepage-tile:nth-child(3),
    .homepage-tiles--5-tiles > .homepage-tile:nth-child(4) {
        grid-area: auto / auto / auto / span 2; /* 50% width each */
    }

    .homepage-tiles--5-tiles > .homepage-tile:nth-child(5) {
        grid-area: auto / auto / auto / span 4; /* Full width */
    }

    /* 2 tiles on tablet. Needed explicitly: the desktop rules place these with
       6-column grid-area coordinates, which overflow this 4-column track and
       render the pair asymmetric. */
    .homepage-tiles--2-tiles > .homepage-tile:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3; /* 50% width, 2 rows tall */
    }

    .homepage-tiles--2-tiles > .homepage-tile:nth-child(2) {
        grid-area: 1 / 3 / 3 / 5; /* 50% width, 2 rows tall */
    }

    /* 3 tiles on tablet: full-width hero + two half-width tiles. */
    .homepage-tiles--3-tiles > .homepage-tile:nth-child(1) {
        grid-area: 1 / 1 / 3 / 5; /* Full width */
        min-height: 300px;
    }

    .homepage-tiles--3-tiles > .homepage-tile:nth-child(2) {
        grid-area: 3 / 1 / 4 / 3; /* 50% width */
    }

    .homepage-tiles--3-tiles > .homepage-tile:nth-child(3) {
        grid-area: 3 / 3 / 4 / 5; /* 50% width */
    }

    /* 4 tiles on tablet. Also required explicitly: the desktop placements use
       columns 5-7, which don't exist here, collapsing tiles 2 and 3 to slivers. */
    .homepage-tiles--4-tiles > .homepage-tile:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3; /* 50% width, 2 rows tall */
    }

    .homepage-tiles--4-tiles > .homepage-tile:nth-child(2) {
        grid-area: 1 / 3 / 2 / 5; /* 50% width */
    }

    .homepage-tiles--4-tiles > .homepage-tile:nth-child(3) {
        grid-area: 2 / 3 / 3 / 5; /* 50% width */
    }

    .homepage-tiles--4-tiles > .homepage-tile:nth-child(4) {
        grid-area: 3 / 1 / 4 / 5; /* Full width */
    }

    /* UK 3-tile layout on tablet */
    .homepage-tiles--en-gb > .homepage-tile:nth-child(1) {
        grid-area: 1 / 1 / 3 / 5; /* Full width */
        min-height: 300px;
    }

    .homepage-tiles--en-gb > .homepage-tile:nth-child(2) {
        grid-area: auto / auto / auto / span 2; /* 50% */
    }

    .homepage-tiles--en-gb > .homepage-tile:nth-child(3) {
        grid-area: auto / auto / auto / span 2; /* 50% */
    }

    /* px, not rem: this site sets html { font-size: 10px }, so rem values here
       render at roughly half their intended size (0.9rem = 9px). The legacy
       freewall tiles use 18px captions on mobile - match that. */
    .homepage-tile__title {
        font-size: 20px;
    }

    .homepage-tile__subtitle {
        font-size: 18px;
    }
}

/* ==========================================================================
   Mobile Breakpoint (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .homepage-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        grid-auto-rows: minmax(150px, auto);
        padding: 0 0.5rem;
        margin: 1rem auto;
    }

    /* Drop the desktop grid-area placements and flow tiles in source order.
       The spans below are !important for the same reason: they have to beat the
       desktop `grid-area` shorthand, which also sets grid-column. */
    .homepage-tiles > .homepage-tile {
        grid-area: auto !important; /* Reset all grid areas */
        grid-column: span 1 !important;
    }

    /* Hero tile always full width */
    .homepage-tiles > .homepage-tile:nth-child(1) {
        grid-column: span 2 !important;
        min-height: 200px;
    }

    /* Match the legacy freewall mobile density (sw100/sw50 classes) so moving
       a store onto this grid doesn't lengthen its mobile homepage:
       5 tiles -> 1 full, 2+3 side by side, 4 full, 5 full. */
    .homepage-tiles--5-tiles > .homepage-tile:nth-child(2),
    .homepage-tiles--5-tiles > .homepage-tile:nth-child(3) {
        grid-column: span 1 !important;
    }

    .homepage-tiles--5-tiles > .homepage-tile:nth-child(4),
    .homepage-tiles--5-tiles > .homepage-tile:nth-child(5) {
        grid-column: span 2 !important;
    }

    /* 2-tile stores: both full width (legacy sw100 on each). Row span of 2 so a
       full-bleed tile keeps a sane aspect ratio instead of a 200px letterbox. */
    .homepage-tiles--2-tiles > .homepage-tile:nth-child(1),
    .homepage-tiles--2-tiles > .homepage-tile:nth-child(2) {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
        min-height: 220px;
    }

    /* 3 tiles: hero full width, then the two product tiles side by side. */
    .homepage-tiles--3-tiles > .homepage-tile:nth-child(2),
    .homepage-tiles--3-tiles > .homepage-tile:nth-child(3) {
        grid-column: span 1 !important;
    }

    /* 4 tiles: 1 full, 2+3 side by side, 4 full. */
    .homepage-tiles--4-tiles > .homepage-tile:nth-child(2),
    .homepage-tiles--4-tiles > .homepage-tile:nth-child(3) {
        grid-column: span 1 !important;
    }

    .homepage-tiles--4-tiles > .homepage-tile:nth-child(4) {
        grid-column: span 2 !important;
    }

    /* UK hero tile even taller on mobile */
    .homepage-tiles--en-gb > .homepage-tile:nth-child(1) {
        min-height: 250px;
    }

    .homepage-tile__overlay {
        margin-top: 20px;
        display: table; /* Maintain table display for centering */
        text-align: center; /* Ensure text is centered */
    }

    .homepage-tile__content {
        display: table-cell;
        vertical-align: bottom;
        text-align: center;
        padding: 40px 0 20px 0;
    }

    .homepage-tile__title {
        display: none; /* Hide desktop title on mobile */
    }

    .homepage-tile__subtitle {
        display: block; /* Show mobile subtitle */
        text-align: center; /* Center subtitle text */
    }
}

/* ==========================================================================
   Small Mobile Breakpoint (< 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .homepage-tiles {
        grid-auto-rows: minmax(150px, auto);
    }

    /* Keep the 2-column track here: the legacy freewall also puts tiles 2 and 3
       side by side below 500px (sw50), so we must not collapse to a single
       column or the mobile homepage grows much taller than production. */
    .homepage-tiles > .homepage-tile {
        min-height: 150px;
    }

    .homepage-tiles > .homepage-tile:nth-child(1) {
        min-height: 150px;
    }
}

/* ==========================================================================
   Accessibility & Print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .homepage-tile {
        transition: none;
    }

    .homepage-tile:hover {
        transform: none;
    }
}

@media print {
    .homepage-tiles {
        display: block;
    }

    .homepage-tile {
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   Debug (Development Only)
   ========================================================================== */

.homepage-tiles__debug {
    margin-top: 1rem;
    padding: 0.5rem;
    background: #f0f0f0;
    font-size: 0.85rem;
    font-family: monospace;
    border-left: 3px solid #0099a8;
}