/* Rhino member photography: clear subjects above solid, readable workout text. */
.app-shell .intro,
.app-shell .hero,
.workouts-page .workouts-hero {
  background-color: #0c0c0e;
  background-image:
    linear-gradient(180deg, #0c0c0e08 0%, #0c0c0e20 35%, #0c0c0eb8 75%, #0c0c0e 100%),
    url('/workouts/photos/gym-community.jpeg');
  background-size: 100% 100%, cover;
  background-position: center, center top;
  background-repeat: no-repeat;
}
.app-shell .intro {
  background-image:
    linear-gradient(90deg, #0c0c0e 5%, #0c0c0ef0 45%, #0c0c0e20 70%),
    linear-gradient(180deg, #0c0c0e00 40%, #0c0c0ee8 100%),
    url('/assets/coach-barbell.jpeg');
  background-size: 100% 100%, 100% 100%, 42% auto;
  background-position: center, center, right top;
  min-height: 340px;
  margin: 24px 0 8px;
  padding: 30px 24px 24px;
  align-items: flex-end;
  border: 1px solid #323238;
  border-radius: 4px;
}
.app-shell .hero {
  background-image:
    linear-gradient(90deg, #0c0c0e 10%, #0c0c0ef0 35%, #0c0c0e18 75%),
    linear-gradient(180deg, #0c0c0e00 35%, #0c0c0e 100%),
    url('/workouts/photos/gym-community.jpeg');
  background-size: 100% 100%, 100% 100%, 68% auto;
  background-position: center, center, right top;
}
.app-shell .hero h1 { font-size: clamp(50px, 7vw, 104px); }
.app-shell .hero-aside { color: #dedee3; text-shadow: 0 2px 12px #000; }
.app-shell .intro h1,
.app-shell .hero h1 { text-shadow: 0 2px 20px #000; }
.app-shell .intro .program-meta span { color: #dedee3; }
.app-shell .cards > .card {
  --workout-photo: url('/workouts/photos/dumbbell-strength.jpeg');
  --photo-position: center -45px;
  padding-top: 230px;
  background-color: #18181c;
  background-image:
    linear-gradient(180deg, #18181c00 0px, #18181c18 110px, #18181ce6 205px, #18181c 235px),
    var(--workout-photo);
  background-size: 100% 100%, 100% auto;
  background-position: center, var(--photo-position);
  background-repeat: no-repeat;
}
.app-shell .cards > .card:nth-child(6n+2) { --workout-photo: url('/workouts/photos/run-conditioning.jpeg'); }
.app-shell .cards > .card:nth-child(6n+3) { --workout-photo: url('/workouts/photos/sled-training.jpeg'); }
.app-shell .cards > .card:nth-child(6n+4) { --workout-photo: url('/workouts/photos/bike-conditioning.jpeg'); }
.app-shell .cards > .card:nth-child(6n+5) { --workout-photo: url('/workouts/photos/run-profile.jpeg'); }
.app-shell .cards > .card:nth-child(6n) { --workout-photo: url('/workouts/photos/run-action.jpeg'); }
.app-shell .cards > .card.type-strength { --workout-photo: url('/workouts/photos/dumbbell-strength.jpeg'); }
.app-shell .cards > .card.type-strength ~ .card.type-strength { --workout-photo: url('/workouts/photos/sled-training.jpeg'); }
.app-shell .cards > .card.type-hybrid { --workout-photo: url('/workouts/photos/run-conditioning.jpeg'); }
.app-shell .cards > .card.type-hybrid ~ .card.type-hybrid { --workout-photo: url('/workouts/photos/bike-conditioning.jpeg'); }
.app-shell .cards > .card.type-olympic-lifting { --workout-photo: url('/workouts/photos/sled-training.jpeg'); }
.app-shell .cards > .card.type-super-hybrid { --workout-photo: url('/workouts/photos/run-action.jpeg'); }
.app-shell .card .type-tag,
.app-shell .card .card-preview,
.app-shell .card .card-prescription,
.app-shell .card .index,
.app-shell .card .day-index { color: #dedee3; }
.app-shell .card .open-session { background: #0c0c0e99; }
@media (max-width: 800px) {
  .app-shell .hero { background-size: 100% 100%, 100% 100%, 85% auto; }
}
@media (max-width: 600px) {
  .app-shell .intro {
    min-height: 320px;
    padding: 22px 14px 18px;
    margin-top: 18px;
    align-items: flex-end;
    background-size: 100% 100%, 100% 100%, auto 320px;
    background-position: center, center, right top;
  }
  .app-shell .intro .program-meta span { max-width: 115px; }
  .app-shell .hero {
    padding-top: 240px;
    background-image:
      linear-gradient(180deg, #0c0c0e00 100px, #0c0c0ec0 220px, #0c0c0e 310px),
      url('/workouts/photos/gym-community.jpeg');
    background-size: 100% 100%, 100% auto;
    background-position: center, center top;
  }
  .app-shell .hero h1 { font-size: clamp(50px, 12vw, 72px); }
  .app-shell .cards > .card { --photo-position: center -35px; }
}
@media (max-width: 360px) {
  .app-shell .intro { display: flex; gap: 8px; }
  .app-shell .intro .program-meta { text-align: right; margin-top: 0; }
}

/* Stable session photos: filtering does not change the chosen image. */
#cards > .card[data-session-id="b2w1d1"],
#cards > .card[data-session-id="b2w3d5"] {
  --workout-photo: url('/workouts/photos/leg-extension.jpeg');
  --photo-position: center -10px;
}
#cards > .card[data-session-id="b2w1d6"] {
  --workout-photo: url('/workouts/photos/community-team.jpeg');
  --photo-position: center -60px;
}
#cards > .card[data-session-id="b2w1d2"],
#cards > .card[data-session-id="b2w4d2"] {
  --workout-photo: url('/workouts/photos/run-conditioning.jpeg');
  --photo-position: center -35px;
}
#cards > .card[data-session-id="b2w1d4"],
#cards > .card[data-session-id="b2w4d4"] {
  --workout-photo: url('/workouts/photos/run-front.jpeg');
  --photo-position: center top;
}
#cards > .card[data-session-id="b2w2d2"],
#cards > .card[data-session-id="b2w5d2"] {
  --workout-photo: url('/workouts/photos/run-coach.jpeg');
  --photo-position: center top;
}
#cards > .card[data-session-id="b2w2d6"] {
  --workout-photo: url('/workouts/photos/community-standing.jpeg');
  --photo-position: center -95px;
}
#cards > .card[data-session-id="b2w3d6"] {
  --workout-photo: url('/workouts/photos/community-pair.jpeg');
  --photo-position: center -65px;
}
#cards > .card[data-session-id="b2w2d4"],
#cards > .card[data-session-id="b2w5d4"] {
  --workout-photo: url('/workouts/photos/run-coach-side.jpeg');
  --photo-position: center -70px;
}
#cards > .card[data-session-id="b2w3d2"] {
  --workout-photo: url('/workouts/photos/row-training.jpeg');
  --photo-position: center -30px;
}
#cards > .card[data-session-id="b2w1d3"],
#cards > .card[data-session-id="b2w1d5"],
#cards > .card[data-session-id="b2w2d3"],
#cards > .card[data-session-id="b2w3d3"],
#cards > .card[data-session-id="b2w4d1"],
#cards > .card[data-session-id="b2w4d3"],
#cards > .card[data-session-id="b2w5d3"] {
  --workout-photo: url('/workouts/photos/barbell-row.jpeg');
  --photo-position: center top;
}
#cards > .card[data-session-id="b2w2d1"],
#cards > .card[data-session-id="b2w4d5"] {
  --workout-photo: url('/workouts/photos/bench-coach.jpeg');
  --photo-position: center -155px;
}
#cards > .card[data-session-id="b2w2d5"],
#cards > .card[data-session-id="b2w5d1"] {
  --workout-photo: url('/workouts/photos/bench-front.jpeg');
  --photo-position: center -200px;
}
#cards > .card[data-session-id="b2w4d6"] {
  --workout-photo: url('/workouts/photos/community-seated.jpeg');
  --photo-position: center top;
}
#cards > .card[data-session-id="b2w3d1"],
#cards > .card[data-session-id="b2w5d5"] {
  --workout-photo: url('/workouts/photos/bench-side.jpeg');
  --photo-position: center -240px;
}
#cards > .card[data-session-id="b2w5d6"] {
  --workout-photo: url('/workouts/photos/gym-community.jpeg');
  --photo-position: center top;
}
#cards > .card[data-session-id="b2w3d4"] {
  --workout-photo: url('/workouts/photos/run-training-wide.png');
  --photo-position: center top;
}
@media print {
  .app-shell .intro, .app-shell .hero, .app-shell .card, .workouts-page .workouts-hero { background-image: none !important; }
  .app-shell .cards > .card { padding-top: 20px; }
}