/*
 * Sterkenburg Media homepage (TPL-02A), loaded only by the homepage layout
 * (html/com_content/featured/home.php) through the asset template.sterkenburg.home.
 * Visual reference: design/prototypes/concept-c/index.html (slider variant 1).
 * Uses the tokens of template.css. Sections:
 *   1. Page frame and section heads     4. Categories
 *   2. Featured slider                  5. Selected photography
 *   3. Latest albums                    6. Webdesign, webshop and contact
 *
 * Breakpoints, written out as in template.css: slider 1000px / 600px; album cards
 * 1100px / 900px / 540px; the navigation bar switches at 900px (template.css).
 * Images keep their ratio: only .sm-ratio boxes crop, and only images of that ratio.
 */

/* ===================================================================== 1. Page frame */

.sm-home {
    --sm-gap: clamp(1rem, 1.6vw, 1.5rem);
    --sm-section: clamp(2.5rem, 5vw, 4rem);
}

body.is-home .sm-page { padding-top: clamp(.9rem, 2vw, 1.4rem); }

.sm-home__notice {
    margin: 0 0 var(--sm-space-3);
    padding: var(--sm-space-2) var(--sm-space-3);
    border-left: 3px solid var(--sm-color-accent);
    background: var(--sm-color-surface);
    color: var(--sm-color-muted);
    font-size: var(--sm-text-s);
}

.sm-home__section { padding-top: var(--sm-section); }
.sm-home__featured + .sm-home__section { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.sm-home__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sm-space-2) var(--sm-space-4);
    margin-bottom: var(--sm-space-4);
    padding-top: var(--sm-space-4);
    border-top: 1px solid var(--sm-color-line);
}

.sm-home__head h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.sm-home__head p { margin: 0; color: var(--sm-color-muted); font-size: .9rem; }
.sm-home__head .sm-home__h-small { font-size: clamp(1.35rem, 2vw, 1.6rem); }

.sm-home__all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: var(--sm-target);
    font-weight: 700;
    text-decoration: none;
}

.sm-home__all:hover { text-decoration: underline; }

.sm-home ul,
.sm-home ol { margin: 0; padding: 0; list-style: none; }
.sm-home figure { margin: 0; }

/* Ratio boxes (.sm-ratio) and album cards (.sm-cards) live in gallery.css (shared with the gallery pages). */

/* ===================================================================== 2. Featured slider */

/* The featured slider is the STM Featured Slider module (FSL-01); the template's own
   slider was retired in Block 8. The template passes its fonts in template.css. */

/* ===================================================================== 3. Latest albums */

/* Album cards: gallery.css (.sm-cards), shared with the archive and the latest-albums module. */

/* ===================================================================== 4. Categories */

.sm-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sm-gap); }
.sm-cat__meta { display: block; color: var(--sm-color-muted); font-size: .86rem; }
.sm-demo-label { display: inline-block; margin-left: .4rem; padding: .1rem .45rem; border-radius: 4px; background: var(--sm-color-warning-bg); color: var(--sm-color-warning); font: 700 .72rem/1.4 var(--sm-font-text); letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; }
.sm-portfolio__link { display: block; border-radius: 10px; }
.sm-portfolio__link:focus-visible { outline-offset: 4px; }
.sm-cat__inner { display: block; border-radius: 10px; color: var(--sm-color-ink); text-decoration: none; }
.sm-cat__img { border-radius: 10px; }
.sm-cat__name { display: block; padding-top: .55rem; font: 700 1.12rem/1.3 var(--sm-font-head); font-stretch: 87.5%; }
a.sm-cat__inner:hover .sm-cat__name { color: var(--sm-color-accent-ink); text-decoration: underline; }
a.sm-cat__inner:focus-visible { outline-offset: 4px; }

@media (max-width: 899.98px) { .sm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================================================================== 5. Selected photography */

/* Featured photography mosaic (Block 7B, R-20). Tiles are the watermark-free 600/800 px
   files; no overlay, no caption under every tile; a light hover and a clear focus ring.
   A cropped tile shows the photo's focal point (--fx, --fy) when one is set. */
.sm-mosaic-frame { container-type: inline-size; }
.sm-mosaic { --mosaic-gap: 8px; margin: 0; padding: 0; list-style: none; }
.sm-mosaic__tile { position: relative; min-width: 0; margin: 0; }
.sm-mosaic__tile a { display: block; height: 100%; overflow: hidden; border-radius: var(--sm-radius-s); background: #DFE6EB; }
.sm-mosaic__tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transition: filter .2s ease, transform .35s ease; }
.sm-mosaic__tile a:hover img { filter: brightness(1.07); }
.sm-mosaic__tile a:focus-visible { outline: var(--sm-focus-width) solid var(--sm-focus-color); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .sm-mosaic__tile a:hover img { transform: scale(1.02); }
}

/* Editorial: four columns of 3:2 cells (the shape of a landscape photo, so large and
   small tiles hold one uncropped); positions come from Home\Mosaic (--c, --r). */
.sm-mosaic--editorial {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: calc((100cqw - 3 * var(--mosaic-gap)) / 4 * 2 / 3);
    gap: var(--mosaic-gap);
}
.sm-mosaic--editorial > .sm-mosaic__tile { grid-column: var(--c); grid-row: var(--r); }

/* Justified rows: every photo in its own ratio, rows of equal height; the last row is
   not stretched (the ::after spacer takes the free space). */
.sm-mosaic--justified { --mosaic-row: 240px; display: flex; flex-wrap: wrap; gap: var(--mosaic-gap); }
.sm-mosaic--justified::after { content: ""; flex-grow: 1000000; }
.sm-mosaic--justified > .sm-mosaic__tile { flex-grow: calc(var(--ar) * 100); flex-basis: calc(var(--ar) * var(--mosaic-row)); }
.sm-mosaic--justified img { height: auto; aspect-ratio: var(--ar); }
/* The tile keeps its shape before its image is added (Block 7C). */
.sm-mosaic--justified .sm-mosaic__tile a { aspect-ratio: var(--ar); }

@media (max-width: 899.98px) { .sm-mosaic--justified { --mosaic-row: 170px; } }

/* Phones: two columns of 3:2 cells, the first (and with an even number also the last)
   photo across both, so no cell stays empty; no portrait-tall tiles. */
@media (max-width: 759.98px) {
    .sm-mosaic { --mosaic-gap: 6px; }
    .sm-mosaic--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--mosaic-gap)) / 2 * 2 / 3); }
    .sm-mosaic--editorial > .sm-mosaic__tile { grid-column: auto; grid-row: auto; }
    .sm-mosaic--editorial > .sm-mosaic__tile--phone-wide { grid-column: span 2; grid-row: span 2; }
    .sm-mosaic--justified { --mosaic-row: 120px; }
}

/* The mosaic's lightbox: album title above the photo's own line, then the caption and the
   two actions. */
.sm-lightbox .stmgallery-lightbox-album { color: var(--sm-color-on-navy); font: 700 1.1rem/1.3 var(--sm-font-head); font-stretch: 87.5%; }
.sm-lightbox .stmgallery-lightbox-date:empty { display: none; }
.sm-lightbox .stmgallery-lightbox-date::before { content: "· "; }
.sm-lightbox--mosaic .stmgallery-lightbox-heading { color: var(--sm-color-on-navy-soft); font: 400 var(--sm-text-s) var(--sm-font-text); }
.sm-lightbox--mosaic .stmgallery-lightbox-title:not(:empty)::after { content: " ·"; }
.sm-lightbox .stmgallery-lightbox-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .25rem; }
.sm-lightbox .stmgallery-lightbox-album-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.75rem; /* 44 px touch target */
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--sm-color-accent-ink);
    color: #fff;
    font: 700 .85rem var(--sm-font-text);
    text-decoration: none;
}
.sm-lightbox .stmgallery-lightbox-album-link:hover { background: var(--sm-color-navy); box-shadow: inset 0 0 0 1px var(--sm-color-on-navy-accent); }
.sm-lightbox .stmgallery-lightbox-album-link[hidden] { display: none; }


/* 2.4 : 1 makes the wide 16:9 photo about as tall as the two 3:2 photos beside it, so
   no image has to be cropped to another ratio to fill the space. */
.sm-portfolio { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: var(--sm-gap); }
.sm-portfolio__item--wide { grid-row: span 2; }
.sm-portfolio .sm-ratio { border-radius: 10px; }
.sm-portfolio figcaption { padding-top: .4rem; color: var(--sm-color-muted); font-size: .84rem; }

/* The wide item keeps 16:9 and stays at the top of its two rows. */
.sm-portfolio__item--wide { align-self: start; }

@media (max-width: 760px) {
    .sm-portfolio { grid-template-columns: minmax(0, 1fr); }
    .sm-portfolio__item--wide { grid-row: auto; }
}

/* ===================================================================== 6. Webdesign, webshop and contact */

.sm-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sm-gap); }

.sm-service {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--sm-space-4);
    align-items: center;
    padding: .7rem;
    border: 1px solid var(--sm-color-line);
    border-radius: var(--sm-radius-l);
    background: var(--sm-color-surface);
    color: var(--sm-color-ink);
    text-decoration: none;
}

.sm-service:hover { color: var(--sm-color-ink); }
.sm-service__img { border-radius: var(--sm-radius-m); }
.sm-service__name { display: block; font: 700 1.15rem/1.3 var(--sm-font-head); font-stretch: 87.5%; }
.sm-service:hover .sm-service__name { color: var(--sm-color-accent-ink); text-decoration: underline; }
.sm-service__text { display: block; color: var(--sm-color-muted); font-size: .9rem; }

@media (max-width: 700px) { .sm-services { grid-template-columns: minmax(0, 1fr); } }