.hippo-activities { --hippo-night: #0e0a04; --hippo-bark: #2a1a08; --hippo-ivory: #f5f0e6; --hippo-sand: #c49a6c; background: var(--hippo-night); box-sizing: border-box; color: var(--hippo-ivory); font-family: Montserrat, Arial, sans-serif; margin-left: calc(50% - 50vw); padding: clamp(3.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem); width: 100vw; }
.hippo-activities-widget--fullbleed, .hippo-activities-widget--fullbleed > .elementor-widget-container { margin-inline: 0 !important; max-width: none !important; width: 100% !important; }
.hippo-activities-container--fullbleed, .hippo-activities-container--fullbleed > .e-con-inner, .hippo-activities-container--fullbleed > .elementor-container { max-width: none !important; overflow: visible !important; }
.hippo-activities__header { background-color: var(--hippo-bark); background-position: center 40%; background-size: cover; box-sizing: border-box; margin-bottom: 4rem; min-height: 360px; outline: none; overflow: hidden; padding: clamp(4rem, 9vw, 6rem) 2rem; position: relative; text-align: center; }
.hippo-activities__header::before { background: rgba(14, 10, 4, .45); content: ''; inset: 0; position: absolute; }
.hippo-activities__header > * { position: relative; z-index: 1; }
.hippo-activities__label { color: var(--hippo-sand); display: block; font-size: .6rem; letter-spacing: .35em; text-transform: uppercase; }
.hippo-activities h2 { color: var(--hippo-ivory); font: 300 clamp(2rem, 4vw, 3.1rem) / 1.15 "Cormorant Garamond", Georgia, serif; margin: 1rem 0 0; }
.hippo-activities h2 em { color: var(--hippo-sand); }
.hippo-activities__rule { background: var(--hippo-sand); display: block; margin: 1.3rem auto; max-height: 0; opacity: 0; transition: max-height .5s ease, opacity .4s ease; width: 54px; }
.hippo-activities__header > p { color: rgba(245, 240, 230, .78); line-height: 1.7; margin: 0 auto; max-height: 0; max-width: 520px; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease; }
.hippo-activities__header:hover .hippo-activities__rule, .hippo-activities__header:focus .hippo-activities__rule { max-height: 4px; opacity: 1; }
.hippo-activities__header:hover > p, .hippo-activities__header:focus > p { max-height: 10em; opacity: 1; }
.hippo-activities__grid { background: rgba(196, 154, 108, .07); display: grid; gap: 2px; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.hippo-activity { aspect-ratio: 3 / 4; background: var(--hippo-bark); isolation: isolate; overflow: hidden; position: relative; }
.hippo-activity__media { bottom: -6%; inset-inline: 0; position: absolute; top: -6%; transform: translate3d(0, var(--hippo-parallax-y, 0px), 0); will-change: transform; }
.hippo-activity__image, .hippo-activity__mosaic { inset: 0; position: absolute; }
.hippo-activity__image, .hippo-activity__mosaic span { background: linear-gradient(135deg, rgba(196, 154, 108, .16), transparent 45%), var(--hippo-bark); background-position: center; background-size: cover; display: block; height: 100%; opacity: .55; transition: transform .7s ease, opacity .4s ease; width: 100%; }
.hippo-activity__mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.hippo-activity__body { background: linear-gradient(to bottom, transparent 40%, rgba(14, 10, 4, .88) 100%); box-sizing: border-box; display: flex; flex-direction: column; height: 100%; inset: 0; justify-content: flex-end; padding: 1.4rem 1.6rem; position: absolute; transition: background .4s ease; }
.hippo-activity__number { color: rgba(196, 154, 108, .25); font: 300 4rem / 1 "Cormorant Garamond", Georgia, serif; margin-bottom: auto; }
.hippo-activity h3 { color: var(--hippo-ivory); font: 300 1.5rem / 1.1 "Cormorant Garamond", Georgia, serif; margin: 0 0 .35rem; }
.hippo-activity p { color: rgba(245, 240, 230, .78); line-height: 1.7; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease; }
.hippo-activity:hover .hippo-activity__image, .hippo-activity:focus .hippo-activity__image, .hippo-activity:hover .hippo-activity__mosaic span, .hippo-activity:focus .hippo-activity__mosaic span { opacity: .72; transform: scale(1.06); }
.hippo-activity:hover .hippo-activity__body, .hippo-activity:focus .hippo-activity__body { background: linear-gradient(to bottom, transparent 15%, rgba(14, 10, 4, .97) 100%); }
.hippo-activity:hover p, .hippo-activity:focus p { max-height: 20em; opacity: 1; }
.hippo-activity:focus-visible { outline: 2px solid var(--hippo-sand); outline-offset: -2px; }
[data-hippo-activity] { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s ease; }
[data-hippo-activity]:nth-child(3n + 2) { transition-delay: .1s; }
[data-hippo-activity]:nth-child(3n) { transition-delay: .2s; }
[data-hippo-activity].is-visible { opacity: 1; transform: none; }
@media (max-width: 768px) { .hippo-activities__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hippo-activities * { scroll-behavior: auto !important; transition: none !important; } .hippo-activity__media { transform: none; } }