/* Vitina House — activities: hub index, activity facts, video player, next steps */
.act-facts { margin: clamp(28px,4vw,56px) 0 0; max-width: 56rem; }
.act-note { margin: 18px 0 0; max-width: 40rem; font-size: .95rem; line-height: 1.65; color: var(--charcoal); opacity: .85; }
.act-note a { color: var(--bronze-ink); }

/* video: nothing is requested from YouTube until the visitor presses play */
.act-vid { max-width: calc(var(--maxw, 1280px) + 2 * var(--gutter, 24px)); margin: 0 auto; padding: 0 var(--gutter, 24px); box-sizing: border-box; }
.vid { position: relative; aspect-ratio: 16/9; background: var(--deep, #17221C); overflow: hidden; }
.vid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: transform 1.4s cubic-bezier(.2,.6,.2,1), opacity .4s; }
.vid:hover > img { transform: scale(1.02); opacity: .95; }
.vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,34,28,.5), rgba(23,34,28,0) 55%); pointer-events: none; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.vid__play { position: absolute; z-index: 1; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; color: #FAF9F5; display: grid; place-items: center; align-content: center; gap: 18px; font: 600 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.vid__play i { display: grid; place-items: center; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border: 1px solid rgba(250,249,245,.8); border-radius: 50%; transition: background .3s, transform .5s; }
.vid__play i::before { content: ""; margin-left: 6px; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.vid__play:hover i { background: rgba(250,249,245,.14); transform: scale(1.05); }
.vid__play:focus-visible { outline: 2px solid #FAF9F5; outline-offset: -6px; }
.vid__cap { margin: 14px 0 0; font-size: .88rem; line-height: 1.6; opacity: .8; }

/* hub index */
.act-group { padding: clamp(56px, 8vw, 120px) 0 0; }
.act-grid { list-style: none; margin: 0 auto; max-width: calc(var(--maxw, 1280px) + 2 * var(--gutter, 24px)); box-sizing: border-box; padding: 0 var(--gutter, 24px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(28px, 3.5vw, 52px) clamp(16px, 2vw, 32px); }
.act-grid--duo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
@media (min-width: 900px) { .act-grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .act-grid--duo .act-card__img { aspect-ratio: 16/10; } }
.act-card { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.act-card__img { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--greige); }
.act-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
.act-card:hover .act-card__img img, .act-card:focus-visible .act-card__img img { transform: scale(1.035); }
.act-card:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: 4px; }
.act-card__tag { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-ink); }
.act-card__t { margin: 0; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--serif); color: var(--olive-deep, var(--olive)); }
.act-card__d { margin: 0; line-height: 1.6; max-width: 32rem; }
.act-card__video { display: inline-block; margin-left: 10px; opacity: .7; }

/* next steps */
.act-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(10px, 1.4vw, 20px); list-style: none; margin: 0; padding: 0 clamp(10px, 1.4vw, 20px); }
@media (prefers-reduced-motion: reduce) { .vid > img, .act-card__img img, .vid__play i { transition: none; } }
.act-group + .cta-hero { margin-top: clamp(64px, 9vw, 128px); }