/* Homepage layout (module "homepage_layout"): the blocks a store adds to its homepage in Admin > Homepage
   Layout - picture banner, picture with text, product row, text and video - and the editor's notes in the
   preview. Colours, fonts, corners and buttons follow the storefront theme variables, with fallbacks, so
   the light and dark themes and both designs need nothing of their own. Pictures always show whole, in
   their own shape, with the words under or beside them. */

.hl-block {
    --hl-button: var(--sd-btn-bg, var(--theme-button-bg, var(--primary, #111)));
    --hl-button-ink: var(--sd-btn-ink, var(--theme-button-text, var(--primary-contrast, #fff)));
    --hl-soft: var(--sd-accent-soft, #f4f1ea);
    max-width: 1600px;
    margin: 0 auto;
    padding: 48px 50px 24px;
    color: var(--text, #111);
    scroll-margin-top: 120px;
}
html[data-storefront-theme="dark"] .hl-block { --hl-soft: #1c2426; }

.hl-kicker { display: block; margin-bottom: 8px; color: var(--muted, #6b7280); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hl-headline { margin: 0; color: var(--text, #111); font-family: var(--sd-font-display, 'Playfair Display', serif); font-size: clamp(24px, 3.2vw, 38px); font-weight: var(--sd-display-weight, 400); line-height: 1.18; overflow-wrap: anywhere; }
.hl-text { margin: 14px 0 0; color: var(--muted, #4b5563); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.hl-headline + .hl-text { margin-top: 14px; }
.hl-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 22px; padding: 0 26px; border-radius: var(--sd-btn-radius, var(--theme-button-radius, 6px)); background: var(--hl-button); color: var(--hl-button-ink); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: filter .2s ease; }
.hl-button:hover { filter: brightness(.92); }
.hl-button:focus-visible, .hl-banner-media a:focus-visible, .hl-more:focus-visible { outline: 2px solid var(--hl-button); outline-offset: 3px; }

/* ---------------------------------------------------------------- picture banner */
.hl-banner-media, .hl-banner-media a { display: block; width: 100%; }
/* As wide as the page (or the screen); a square or tall picture stops at a comfortable height, centred. */
.hl-banner-media img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(760px, 85vh); margin: 0 auto; border-radius: var(--sd-radius-frame, 16px); }
.hl-banner.is-full { max-width: none; padding-left: 0; padding-right: 0; }
.hl-banner.is-full .hl-banner-media img { border-radius: 0; }
.hl-banner-copy { max-width: 780px; margin: 26px auto 0; padding: 0 16px; text-align: center; }

/* ---------------------------------------------------------------- picture with text */
.hl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.hl-split.is-image-right .hl-split-media { order: 2; }
.hl-split.no-image { grid-template-columns: minmax(0, 1fr); max-width: 900px; text-align: center; }
.hl-split-media a { display: block; }
.hl-split-media img { display: block; width: 100%; height: auto; border-radius: var(--sd-radius-frame, 16px); }
.hl-split-copy { min-width: 0; }

/* ---------------------------------------------------------------- text */
.hl-textblock-inner { max-width: 820px; margin: 0 auto; }
.hl-textblock.is-center { text-align: center; }
.hl-textblock.is-left .hl-textblock-inner { margin-left: 0; }
.hl-textblock.is-soft .hl-textblock-inner { max-width: none; padding: clamp(32px, 5vw, 64px) clamp(22px, 6vw, 96px); border-radius: var(--sd-radius-frame, 16px); background: var(--hl-soft); }
.hl-textblock.is-soft.is-center .hl-textblock-inner > * { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- video */
.hl-video-head { max-width: 780px; margin: 0 auto 24px; text-align: center; }
.hl-video-frame { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sd-radius-frame, 16px); background: #000; }
.hl-video-frame.is-portrait { max-width: 380px; aspect-ratio: 9 / 16; }
.hl-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- product row */
.hl-products-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.hl-products-head h2 { margin: 0; color: var(--text, #111); font-family: var(--sd-font-display, 'Playfair Display', serif); font-size: clamp(22px, 3vw, 30px); font-weight: var(--sd-display-weight, 400); }
.hl-products-head .hl-kicker { margin-bottom: 4px; font-size: 11px; }
.hl-more, .product-strip-more { display: inline-flex; align-items: center; gap: 6px; color: var(--text, #111); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.product-strip-more { margin-right: 6px; }
.hl-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 26px 18px; }

/* ---------------------------------------------------------------- the editor's preview */
.hl-anchor { display: block; height: 0; scroll-margin-top: 110px; }
.hl-empty { display: flex; align-items: flex-start; gap: 12px; max-width: 1500px; margin: 18px auto; padding: 16px 20px; border: 2px dashed rgba(100, 116, 139, .45); border-radius: 12px; background: rgba(148, 163, 184, .1); color: var(--text, #111); font-size: 13px; line-height: 1.55; }
.hl-empty i { margin-top: 3px; color: var(--muted, #64748b); }
.hl-empty em { color: var(--muted, #64748b); }

@media (max-width: 899px) {
    .hl-block { padding: 32px 16px 12px; }
    .hl-banner.is-full { padding-left: 0; padding-right: 0; }
    .hl-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .hl-split.is-image-right .hl-split-media { order: 0; }
    .hl-empty { margin: 12px 16px; }
}
@media (max-width: 699px) {
    .hl-text { font-size: 14px; }
    .hl-button { min-height: 42px; margin-top: 18px; }
    .hl-banner-copy { margin-top: 18px; }
    .hl-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}
@media (prefers-reduced-motion: reduce) { .hl-button { transition: none; } }