/**
 * Kruzik homepage only (loaded via Magento_Cms/layout/cms_index_index.xml).
 * Every selector is scoped to .cms-index-index so nothing leaks into other pages/header.
 *
 * Category tiles. Usage in Page Builder: Row (appearance "Full Bleed", no padding) with column groups
 * (2 + 3 columns); each Column has a background image, vertical alignment "Bottom", no padding and
 * CSS class `kz-tile`. Content: one Text element with CSS class `kz-tile-text` (text align "Center"):
 * kicker paragraph, H2, paragraph with a "Catalog Category Link" widget (inline template).
 * No gaps between the tiles: Hyvä's Page Builder columns carry no padding; on phones they stack.
 */

/* Edge-to-edge width comes from the CMS page layout "Page -- Full Width" (cms-full-width). */

/* 4:5 portrait on every screen; on desktop at most one screen high.
   (Page Builder's "Minimum Height" is a fixed value, it cannot follow the column width.) */
.cms-index-index .kz-tile {
    aspect-ratio: 4 / 5;
    overflow: clip;
    color: #fff;
}

/* rounding seams between the tiles show dark instead of the white page */
.cms-index-index .pagebuilder-column-group:has(.kz-tile) {
    background-color: #111;
}

@media (min-width: 48rem) {
    .cms-index-index .kz-tile {
        max-height: 100svh;
    }
}

/* The text stays at the bottom edge of the screen while the tile runs on below it, and settles at
   the bottom of the image once that is in view (position: sticky, no script). Its own gradient moves
   with it, so the white text stays legible over light parts of a photo. */
.cms-index-index .kz-tile-text {
    position: sticky;
    bottom: 0;
    /* tile heights are fractional (4:5 of a third of the width): reach 1px past the tile so no light
       hairline of the photo shows below the gradient; the tile clips it (clip, not hidden: hidden would
       make the tile a scroll container and stop the sticky text) */
    margin-bottom: -1px;
    /* Strong enough behind the text for >= 4.5:1 white text even on a white photo */
    background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0) 100%);
}

/* Kicker */
.cms-index-index .kz-tile-text p:first-child {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.cms-index-index .kz-tile-text h2 {
    max-width: 22ch;
    margin: 0 auto 1.25rem;
    font-size: clamp(1.5rem, 2.6vw, 2.75rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
}

/* Category link widget */
.cms-index-index .kz-tile-text p:last-child {
    margin: 0;
}

.cms-index-index .kz-tile-text a {
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.5em;
}

.cms-index-index .kz-tile-text a:hover,
.cms-index-index .kz-tile-text a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Section below the tiles (e.g. boutiques): Page Builder heading with CSS class `kz-section-title` */
.cms-index-index .kz-section-title {
    margin: 0 0 2.5rem;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
}

/* Outlined pill button (e.g. Instagram): Page Builder button item with CSS class `kz-social-btn` */
.cms-index-index .kz-social-btn .pagebuilder-button-secondary,
.cms-index-index .kz-social-btn .pagebuilder-button-primary {
    display: inline-block;
    padding: 0.875rem 3.5rem;
    border: 2px solid #6b6b66;
    border-radius: 9999px;
    background: #fff;
    box-shadow: none;
    color: #6b6b6b;
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.cms-index-index .kz-social-btn .pagebuilder-button-secondary:hover,
.cms-index-index .kz-social-btn .pagebuilder-button-secondary:focus-visible,
.cms-index-index .kz-social-btn .pagebuilder-button-primary:hover,
.cms-index-index .kz-social-btn .pagebuilder-button-primary:focus-visible {
    border-color: #222;
    color: #222;
}