/* Stremmel home: full-bleed hero that fills a 16:9 screen, four cards in one row on wide screens. */
.shome { --sg: clamp(24px, 4vw, 80px); }

/* Hero */
.shome-hero { position: relative; width: 100%; height: calc(100vh - 100px); min-height: 420px; max-height: 1100px; background: #F1F1F1; overflow: hidden; }
.shome-slides { position: absolute; inset: 0; }
/* Inactive slides are faded out but were still in the tab order, so a keyboard
   user could land on an invisible link. visibility flips at the end of the fade
   out and immediately on the way in, which keeps the crossfade intact while
   taking hidden slides out of the tab order entirely. */
.shome-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.shome-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s linear 0s; }
.shome-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shome-arrows { position: absolute; left: var(--sg); bottom: 28px; display: flex; gap: 6px; z-index: 2; }
.shome-arrow { width: 44px; height: 44px; background: rgba(0,0,0,0.4); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.shome-arrow:hover { background: rgba(0,0,0,0.6); }
.shome-counter { position: absolute; right: var(--sg); bottom: 40px; color: #fff; font-size: 10px; line-height: 10px; letter-spacing: 1px; z-index: 2; text-shadow: 0 0 6px rgba(0,0,0,0.5); }

/* Announcement caption card on the first slide */
.shome-announce { position: absolute; left: var(--sg); bottom: 84px; z-index: 2; display: flex; flex-direction: column; gap: 5px; background: #fff; padding: 22px 26px; max-width: 560px; text-decoration: none; }
.shome-announce:hover .shome-announce-title { color: #0A0A0A; }
.shome-announce-label { font-size: 12px; line-height: 17px; letter-spacing: 2px; text-transform: uppercase; color: #A3A3A3; }
.shome-announce-title { font-size: 29px; line-height: 36px; font-weight: 400; color: #444; }
.shome-announce-meta { font-size: 13px; line-height: 20px; color: #676767; }
@media (max-width: 767px) {
  .shome-announce { left: 0; right: 0; bottom: 0; max-width: none; padding: 14px 24px 16px; }
  .shome-announce-title { font-size: 20px; line-height: 27px; }
  .shome-announce-meta { font-size: 12px; line-height: 17px; }
  .shome-hero:has(.shome-announce) { height: 78vw; min-height: 300px; }
  .shome-hero:has(.shome-announce) .shome-arrows, .shome-hero:has(.shome-announce) .shome-counter { display: none; }
}

/* Cards */
.shome-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding: 60px var(--sg) 40px; }
.shome-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-width: 0; }
.shome-card-media { display: block; aspect-ratio: 16 / 9; background: #F1F1F1; overflow: hidden; }
.shome-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease; }
.shome-card:hover .shome-card-img { opacity: .85; }
.shome-card-label { margin-top: 10px; font-size: 11px; line-height: 15px; letter-spacing: 2px; text-transform: uppercase; color: #A3A3A3; }
.shome-card-title { font-size: 17px; line-height: 24px; font-weight: 400; color: #444; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.shome-card:hover .shome-card-title { text-decoration-color: #444; }
.shome-card-dates { font-size: 12px; line-height: 17px; color: #676767; }

@media (min-width: 1600px) {
  .shome-card-title { font-size: 19px; line-height: 27px; }
  .shome-cards { gap: 48px; padding-top: 72px; }
}
@media (max-width: 1199px) {
  .shome-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .shome-hero { height: 62vw; min-height: 240px; }
  .shome-arrows { bottom: 16px; }
  .shome-counter { bottom: 30px; }
  .shome-cards { grid-template-columns: 1fr; gap: 32px; padding: 36px 24px 24px; }
}

/* Front page is full-bleed: cancel the content-container gutters set in style.css. */
body.home #brx-content > .brxe-section > .brxe-container { width: 100%; max-width: 100%; }

/* Whole-slide click target for the announced show. Under the card, arrows and
   counter (z-index 2) so all of those keep working. */
.shome-slide-link { position: absolute; inset: 0; z-index: 1; display: block; }