/* S10 front page. Builds on shop.css (header, hero, buttons, fields). */
.front-preview { margin: 0; padding: .5rem 1rem; background: #fff3cd; color: #5c4400; text-align: center; font-size: .9rem; }

.front-title { max-width: 80rem; margin: 1.5rem auto 0; padding: 0 1rem; }

/* the boxes: one column on a phone, three (33 %) from 700 px */
.front-boxes { display: grid; grid-template-columns: 1fr; gap: 1.5rem 1rem; max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem; list-style: none; }

.front-box { margin: 0; min-width: 0; }
.front-box__link { display: block; color: inherit; text-decoration: none; }
a.front-box__link:hover .front-box__caption { text-decoration: underline; }
a.front-box__link:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; }

.front-box__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f0e6; border-radius: .5rem; }
.front-box__missing { width: 100%; height: 100%; background: #e4e0d2; }
.front-box__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* the text block over the image: only rendered when the box has text; vertically centred, semi-transparent */
.front-box__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.front-box__overlay-text { max-width: 100%; margin: 0; padding: .75rem 1rem; color: var(--paper); background: rgba(0, 0, 0, .62); border-radius: .35rem; font-size: 1.1rem; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* the caption row is ALWAYS as high as two lines, so a box without a caption does not shift the boxes next to it */
.front-box__caption { margin: .6rem 0 0; min-height: 2.9em; font-size: 1rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* S18: same width and left edge as the boxes; the text and the form keep a readable width */
.front-newsletter { max-width: 80rem; margin: 1rem auto 2rem; padding: 1.5rem 1rem; }
.front-newsletter > p, .front-newsletter__form, .front-newsletter .form-errors { max-width: 40rem; }
.front-newsletter h2 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; }
.front-newsletter__form { display: grid; gap: 1rem; margin: 1rem 0; }
.front-newsletter__note { color: var(--muted); font-size: .9rem; }
.front-newsletter__note a { color: var(--gold-text); }
.front-newsletter__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 43.75rem) {
    .front-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}