/* Course pages: instructor photo as the hero background, same idea as the salon site.
   Desktop (1200px+): the photo fills the right side at full hero height and fades into the page.
   Smaller screens: the photo sits on top at full width and the title rises over its faded bottom.
   The frame always keeps the photo's own proportions (--r), so nothing is cropped; only the
   slow zoom moves, anchored at the top so heads never leave the frame. */

/* which element is what, per page */
#top:has(.dc-hero-img), #top:has(.db-hero-img), .hero:has(.hero-media) { --hb-bg: var(--iv); position: relative; isolation: isolate; }
#top:has(.dc-hero-img) { --r: .8; }          /* Beatriz 800×1000 */
#top:has(.db-hero-img) { --r: .933; }        /* Evelyn 1254×1344 */
.hero:has(.hero-media) { --r: .8; }          /* Gabriele 800×1000 */

#top > div:has(> .dc-hero-img), #top > div:has(> .db-hero-img), .hero .hero-media { margin: 0 !important; overflow: hidden; z-index: 0; }
#top > div:has(> .dc-hero-img) > [aria-hidden], #top > div:has(> .db-hero-img) > [aria-hidden] { display: none !important; }
.hero .hero-photo::after, .hero .hero-inset { display: none !important; }
.hero .hero-photo, .hero .hero-media picture { display: block; height: 100%; }

.dc-hero-img, .db-hero-img, .hero .hero-media img {
  display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  aspect-ratio: auto !important; object-fit: cover; object-position: 50% 0 !important;
  transform-origin: 50% 0; transform: scale(1.06);
  animation: hbIn 2.4s cubic-bezier(.2,.7,.2,1) forwards, hbKB 26s 2.4s ease-in-out infinite alternate;
}
@keyframes hbIn { to { transform: scale(1); } }
@keyframes hbKB { from { transform: scale(1); } to { transform: scale(1.04) translateX(-1%); } }
@media (prefers-reduced-motion: reduce) { .dc-hero-img, .db-hero-img, .hero .hero-media img { animation: none; transform: none; } }

/* the fade into the page colour */
#top > div:has(> .dc-hero-img)::after, #top > div:has(> .db-hero-img)::after, .hero .hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
#top > div:has(> .dc-hero-img), #top > div:has(> .db-hero-img), .hero .hero-media { position: relative; }

body { overflow-x: clip; }

/* ---------- Desktop: photo as background on the right ---------- */
@media (min-width: 1200px) {
  #top:has(.dc-hero-img), #top:has(.db-hero-img) { min-height: calc(100svh - 115px); padding-top: 3rem !important; padding-bottom: 3.5rem !important; }
  .hero:has(.hero-media) { min-height: calc(100svh - 115px); display: flex; align-items: center; padding-block: 3rem 3.5rem !important; }
  .hero:has(.hero-media) > .hero-grid { width: 100%; grid-template-columns: minmax(0, 620px) !important; }

  #top > div:not(:has(> img)), .hero .hero-copy { position: relative; z-index: 2; max-width: 620px; }
  #top:has(.dc-hero-img), #top:has(.db-hero-img) { grid-template-columns: minmax(0, 620px) !important; }

  #top > div:has(> .dc-hero-img), #top > div:has(> .db-hero-img), .hero .hero-media {
    position: absolute !important; top: 0; right: calc((100% - 100vw) / 2); bottom: auto;
    height: min(100%, calc(50vw / var(--r))); width: auto; aspect-ratio: var(--r); max-width: none !important;
  }
  .hero .hero-media { right: 0; }
  #top > div:has(> .dc-hero-img)::after, #top > div:has(> .db-hero-img)::after, .hero .hero-media::after {
    background:
      linear-gradient(90deg, var(--hb-bg) 0%, color-mix(in srgb, var(--hb-bg) 85%, transparent) 7%, color-mix(in srgb, var(--hb-bg) 40%, transparent) 16%, transparent 30%),
      linear-gradient(0deg, var(--hb-bg) 0%, color-mix(in srgb, var(--hb-bg) 55%, transparent) 9%, transparent 20%);
  }
}

/* ---------- Phones and tablets: photo on top, title over its faded bottom ---------- */
@media (max-width: 1199px) {
  #top:has(.dc-hero-img), #top:has(.db-hero-img) { grid-template-columns: minmax(0, 1fr) !important; padding-top: 0 !important; row-gap: 0 !important; }
  .hero:has(.hero-media) { padding-top: 0 !important; }
  .hero:has(.hero-media) > .hero-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }

  #top > div:has(> .dc-hero-img), #top > div:has(> .db-hero-img), .hero .hero-media {
    order: -1; grid-column: 1 / -1 !important; max-width: none !important;
    width: min(100vw, calc(80svh * var(--r))); aspect-ratio: var(--r); height: auto;
    justify-self: center; margin-inline: calc(50% - min(50vw, calc(40svh * var(--r)))) !important;
  }
  #top > div:has(> .dc-hero-img)::after, #top > div:has(> .db-hero-img)::after, .hero .hero-media::after {
    background: linear-gradient(180deg, transparent 0%, transparent 62%, color-mix(in srgb, var(--hb-bg) 60%, transparent) 80%, var(--hb-bg) 97%);
  }
  #top > div:not(:has(> img)), .hero .hero-copy { position: relative; z-index: 2; grid-column: 1 / -1 !important; margin-top: clamp(-130px, -16vw, -64px); }
}
/* tablets: the photo is narrower than the screen, so soften its side edges too */
@media (min-width: 640px) and (max-width: 1199px) {
  #top > div:has(> .dc-hero-img)::after, #top > div:has(> .db-hero-img)::after, .hero .hero-media::after {
    background:
      linear-gradient(90deg, var(--hb-bg) 0%, transparent 12%, transparent 88%, var(--hb-bg) 100%),
      linear-gradient(180deg, transparent 0%, transparent 62%, color-mix(in srgb, var(--hb-bg) 60%, transparent) 80%, var(--hb-bg) 97%);
  }
}