/* /workouts/ hub */

.wh-hero { background: #000; color: #fff; padding: 64px 60px 56px; border-bottom: 4px solid var(--c-green); }
.wh-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.wh-hero__title { margin-top: 20px; font-family: var(--font-hero); font-size: clamp(64px, 9vw, 120px); line-height: 0.88; letter-spacing: -2px; text-transform: uppercase; }
.wh-hero__lede  { margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--c-text-on-dark-2); max-width: 640px; }

.wh-grid {
    background: #fff; padding: 60px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.wh-tile {
    background: #fff; color: #000;
    border: var(--border-w) solid #000; box-shadow: var(--shadow-6);
    padding: 28px; min-height: 260px;
    display: flex; flex-direction: column; gap: 16px;
    transition: transform 100ms ease, box-shadow 100ms ease;
}
.wh-tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 #000; }
.wh-tile.is-accent { background: var(--c-green); }
.wh-tile header { display: flex; justify-content: space-between; align-items: center; }
.wh-tile__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #444; }
.wh-tile__count {
    font-family: var(--font-display); font-weight: 900; font-size: 14px;
    padding: 4px 10px; background: #000; color: #fff;
    border: var(--border-w) solid #000;
}
.wh-tile.is-accent .wh-tile__count { background: #000; color: var(--c-green); }
.wh-tile__h { font-family: var(--font-hero); font-size: 40px; line-height: 0.95; text-transform: uppercase; letter-spacing: -1px; }
.wh-tile__t { font-size: 14px; line-height: 1.55; color: #222; flex: 1; }
.wh-tile__cta { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }

.wh-cta {
    background: var(--c-green); color: #000;
    padding: 80px 60px;
    text-align: center !important;
    border-top: var(--border-w) solid #000;
    display: flex; flex-direction: column; align-items: center;
}
.wh-cta > .cg3-tag { display: inline-block; }
.wh-cta__title { margin-top: 24px; font-family: var(--font-hero); font-size: clamp(56px, 8vw, 96px); line-height: 0.9; letter-spacing: -1px; text-transform: uppercase; text-align: center !important; }
.wh-cta__lede  { margin: 24px auto 0; max-width: 560px; font-size: 16px; text-align: center !important; }
.wh-cta__ctas  { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1180px) {
    .wh-hero, .wh-cta { padding-left: 36px; padding-right: 36px; }
    .wh-grid { padding: 48px 36px; }
}
@media (max-width: 1100px) { .wh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  {
    .wh-hero, .wh-cta { padding: 56px 24px; }
    .wh-grid { padding: 48px 24px; gap: 16px; }
    .wh-hero__title { font-size: clamp(48px, 11vw, 84px); }
    .wh-cta__title  { font-size: clamp(48px, 9vw, 72px); }
}
@media (max-width: 640px)  {
    .wh-hero, .wh-cta { padding: 48px 18px; }
    .wh-grid { grid-template-columns: 1fr; padding: 32px 18px; gap: 14px; }
    .wh-tile { min-height: 200px; padding: 22px; }
    .wh-tile__h { font-size: 32px; }
    .wh-cta__ctas { flex-direction: column; align-items: stretch; }
    .wh-cta__ctas .cg3-btn { width: 100%; justify-content: center; }
}