/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — components shared by several pages
   Course cards, the contact band, photo tiles with their lightbox, and the
   inner-page hero and breadcrumb. Page stylesheets (layer "sections") build
   on these and may override them.
   ───────────────────────────────────────────────────────────────────────────── */

@layer shared {

  /* ── Course card ───────────────────────────────────────────────────────── */
  .course-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition:
      transform var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out);
  }
  .course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-inset), var(--shadow-lg); }

  /* Programme posters are wide banners (1516 × 484). */
  .course-card__media {
    position: relative;
    aspect-ratio: 1516 / 484;
    border-radius: calc(var(--r-lg) - var(--s-3));
    overflow: hidden;
    background: var(--gold-soft);
  }
  .course-card__media picture, .course-card__media img { width: 100%; height: 100%; }
  .course-card__media img { object-fit: cover; transition: transform 1.2s var(--ease-out); }
  .course-card:hover .course-card__media img { transform: scale(1.04); }
  /* A band of light crosses the poster when the card is pointed at. */
  .course-card__media--poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.38) 50%, transparent 65%);
    translate: 120% 0;
    transition: translate 1.1s var(--ease-out);
    pointer-events: none;
  }
  .course-card:hover .course-card__media--poster::after { translate: -120% 0; }
  .course-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-3) var(--s-3);
  }
  .course-card__title { font-size: var(--fs-h3); }
  .course-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
  .course-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .course-card__desc {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .course-card__foot {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-2);
    font-size: var(--fs-small);
  }
  .course-card__cta { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--red-strong); font-weight: 500; }
  .course-card__cta svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .course-card:hover .course-card__cta svg { transform: translateX(-4px); }

  /* ── Photo tiles and the lightbox ──────────────────────────────────────── */
  .shot {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--r-md);
    background: var(--gold-soft);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.8), var(--shadow-sm);
    cursor: zoom-in;
    text-align: start;
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  @media (hover: hover) {
    .shot:hover { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9), var(--shadow-lg), 0 30px 60px -36px rgb(149 14 23 / 0.45); }
    .shot:hover img { scale: 1.07; }
    .shot:hover .shot__veil { opacity: 1; }
    .shot:hover .shot__frame { opacity: 1; scale: 1; }
    .shot:hover .shot__caption { translate: 0 0; opacity: 1; }
    .shot:hover .shot__zoom { opacity: 1; scale: 1; }
  }
  .shot:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
  .shot picture, .shot img { width: 100%; height: 100%; }
  .shot img { object-fit: cover; transition: scale 1.4s var(--ease-out), filter var(--dur-slow) var(--ease-out); }
  .shot img { object-position: 50% 30%; }
  /* Photographs settle from a gentle zoom as they are revealed. */
  .js [data-reveal] > .shot img { scale: 1.18; filter: saturate(0.6); }

  .shot__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgb(43 20 16 / 0.72), rgb(43 20 16 / 0.18) 42%, transparent 62%);
    opacity: 0.55;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .shot:focus-visible .shot__veil { opacity: 1; }

  /* A fine gold frame draws in on hover. */
  .shot__frame {
    position: absolute;
    inset: 0.7rem;
    z-index: 2;
    border-radius: calc(var(--r-md) - 0.7rem);
    border: 1px solid rgb(247 209 74 / 0.85);
    opacity: 0;
    scale: 1.04;
    transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-slow) var(--ease-out);
    pointer-events: none;
  }
  .shot:focus-visible .shot__frame { opacity: 1; scale: 1; }

  .shot__caption {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    display: grid;
    justify-items: start;
    gap: var(--s-1);
    padding: var(--s-5);
    color: var(--white);
    translate: 0 0.6rem;
    opacity: 0;
    transition: translate var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .shot:focus-visible .shot__caption { translate: 0 0; opacity: 1; }
  .shot__tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.18);
    border: 1px solid rgb(255 255 255 / 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--fs-caption);
    font-weight: 500;
  }
  .shot__title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
  }

  .shot__zoom {
    position: absolute;
    z-index: 3;
    top: var(--s-4);
    inset-inline-end: var(--s-4);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    color: var(--red-strong);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    scale: 0.6;
    transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-slow) var(--ease-out);
  }
  .shot__zoom svg { width: 1.1rem; height: 1.1rem; }
  .shot:focus-visible .shot__zoom { opacity: 1; scale: 1; }

  /* Touch screens have no hover: captions stay visible. */
  @media (hover: none) {
    .shot__caption { opacity: 1; translate: 0 0; }
    .shot__veil { opacity: 0.9; }
  }

  /* Lightbox */
  .lightbox {
    width: 100vw;
    max-width: none;
    height: 100svh;
    max-height: none;
    margin: 0;
    padding: clamp(1rem, 3vw, 3rem) clamp(3.75rem, 8vw, 7rem);
    border: 0;
    background: transparent;
    color: var(--white);
    overflow: hidden;
  }
  .lightbox[open] { display: grid; place-items: center; }
  .lightbox::backdrop {
    background: radial-gradient(circle at 50% 40%, rgb(60 22 18 / 0.86), rgb(20 8 6 / 0.94));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  html.lightbox-open { overflow: hidden; }
  .lightbox__figure {
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    max-width: 100%;
    max-height: 100%;
    animation: lightbox-in 0.6s var(--ease-out);
  }
  .lightbox__picture { display: block; }
  .lightbox__picture img {
    max-width: min(100%, 72rem);
    max-height: calc(100svh - 9rem);
    width: auto;
    height: auto;
    border-radius: var(--r-md);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15), 0 40px 90px -30px rgb(0 0 0 / 0.7);
    transition: opacity 0.35s var(--ease-out), scale 0.5s var(--ease-out);
  }
  .lightbox.is-switching .lightbox__picture img { opacity: 0; scale: 0.97; }
  .lightbox__caption {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-5);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.18);
    font-size: var(--fs-small);
  }
  .lightbox__count { color: var(--gold-bright); font-weight: 600; direction: ltr; }
  .lightbox__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
  .lightbox .icon-btn { position: absolute; background: rgb(255 255 255 / 0.92); color: var(--ink); border-color: transparent; }
  .lightbox .icon-btn:hover { color: var(--red-strong); }
  .lightbox__close { top: clamp(0.75rem, 2vw, 1.5rem); inset-inline-end: clamp(0.75rem, 2vw, 1.5rem); }
  .lightbox__nav { top: 50%; translate: 0 -50%; }
  .lightbox__nav:hover { transform: none; scale: 1.06; }
  .lightbox__nav--prev { inset-inline-start: clamp(0.5rem, 2vw, 1.75rem); }
  .lightbox__nav--next { inset-inline-end: clamp(0.5rem, 2vw, 1.75rem); }
  @keyframes lightbox-in { from { opacity: 0; scale: 0.94; } }

  @media (max-width: 560px) {
    .lightbox { padding-inline: var(--s-3); }
    .lightbox__nav { top: auto; bottom: var(--s-4); translate: none; }
    .lightbox__picture img { max-height: calc(100svh - 12rem); }
  }

  /* ── Contact band ──────────────────────────────────────────────────────── */
  .cta-band {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-items: center;
    min-height: clamp(40rem, 56.25vw, 100svh);
    padding-block: var(--section-y);
  }
  .cta-band__media { position: absolute; inset: 0; z-index: -1; }
  .cta-band__media picture, .cta-band__media img { width: 100%; height: 100%; }
  .cta-band__media img { object-fit: cover; object-position: 18% 50%; }
  .cta-band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at 76% 48%, rgb(255 251 246 / 0.55), transparent),
      linear-gradient(to bottom, var(--bg), transparent 14%, transparent 84%, var(--bg-deep));
  }
  .cta-band__inner { display: grid; justify-items: start; }
  .cta-band__panel {
    width: min(100%, 38rem);
    display: grid;
    gap: var(--s-4);
    justify-items: start;
    padding: clamp(2rem, 1.2rem + 3vw, 3.25rem);
    border-radius: var(--r-xl);
  }
  .cta-band__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
  .cta-band__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }
  .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

  .contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }
  .contact-list > li { display: grid; min-width: 0; }
  .contact-list > .contact-list__wide { grid-column: 1 / -1; order: 1; }
  .contact-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-3);
    border-radius: var(--r-sm);
    transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  a.contact-item:hover { background: rgb(255 255 255 / 0.8); transform: translateY(-2px); }
  .contact-item .icon-tile { width: 2.75rem; height: 2.75rem; border-radius: 50%; transition: background-color var(--dur-base) linear, color var(--dur-base) linear; }
  .contact-item .icon-tile svg { width: 1.2rem; height: 1.2rem; }
  a.contact-item:hover .icon-tile { background: var(--red-strong); color: var(--white); }
  .icon-tile--wa { color: #1B9A4E; }
  a.contact-item:hover .icon-tile--wa { background: #1FA855; }
  .icon-tile--fb { color: #1877F2; }
  a.contact-item:hover .icon-tile--fb { background: #1877F2; }
  .contact-item__text { display: grid; min-width: 0; }
  .contact-item__text > * { justify-self: start; }
  .contact-item__label { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.5; }
  .contact-item__value { font-weight: 500; line-height: 1.6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .contact-item__value--email { font-size: var(--fs-small); }
  .cta-band__place { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); }
  .cta-band__place svg { width: 1.1rem; height: 1.1rem; color: var(--red); }
  .cta-band__more { font-size: var(--fs-small); }
  @media (min-width: 1081px) and (max-height: 800px) {
    .cta-band__panel { gap: var(--s-3); padding: 2rem 2.5rem; }
    .contact-list { margin-top: var(--s-1); padding-top: var(--s-3); }
    .contact-item { padding: var(--s-2) var(--s-3); }
  }

  /* ── Inner-page hero ───────────────────────────────────────────────────── */
  /* A sunlit band under the floating header: breadcrumb, eyebrow, title, lead,
     with an optional picture in an arch on the far side. */
  .page-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
    padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
    background:
      radial-gradient(60% 80% at 85% 0%, rgb(247 209 74 / 0.22), transparent 70%),
      radial-gradient(50% 70% at 5% 100%, rgb(215 20 31 / 0.07), transparent 70%),
      var(--bg);
  }
  /* Slow sun rays behind the title */
  .page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -30%;
    inset-inline-start: -8%;
    width: min(60rem, 90vw);
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.16) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%);
    mask: radial-gradient(closest-side, #000 10%, transparent 70%);
    animation: rays-spin 120s linear infinite;
    pointer-events: none;
  }
  /* The red and gold swoosh of the school's artwork along the bottom edge */
  .page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 58 C 360 18 900 96 1440 34 V80 H0 Z' fill='%23FBF2E7'/%3E%3Cpath d='M0 50 C 360 10 900 88 1440 26' fill='none' stroke='%23F7D14A' stroke-width='2.5'/%3E%3Cpath d='M0 66 C 380 36 920 102 1440 50' fill='none' stroke='%23D7141F' stroke-width='3' opacity='.85'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    pointer-events: none;
  }
  .page-hero--plain::after { display: none; }
  .page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
  }
  .page-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
  .page-hero__copy { display: grid; gap: var(--s-4); justify-items: start; max-width: 42rem; }
  .page-hero__title { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); line-height: var(--lh-tight); }
  .page-hero__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.85; max-width: 38rem; }
  .page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .page-hero__art {
    position: relative;
    justify-self: center;
    width: min(100%, 26rem);
    aspect-ratio: 4 / 4.6;
    border-radius: 999px 999px var(--r-xl) var(--r-xl);
    overflow: hidden;
    border: 8px solid var(--white);
    box-shadow: 0 0 0 1px var(--red-border), var(--shadow-lg);
    background: var(--gold-soft);
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .page-hero__art picture, .page-hero__art img { width: 100%; height: 100%; }
  .page-hero__art img { object-fit: cover; }

  /* Breadcrumb */
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); }
  .breadcrumb a { color: var(--ink-2); transition: color var(--dur-fast) linear; }
  .breadcrumb a:hover { color: var(--red-strong); }
  .breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
  .breadcrumb li + li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold); }
  .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

  /* Alternate ground for a section */
  .section--deep { background: var(--bg-deep); }
  .section--flush-top { padding-top: 0; }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  @media (max-width: 1080px) {
    .cta-band { min-height: 0; padding-top: 0; align-items: start; }
    .cta-band__media { position: relative; inset: auto; aspect-ratio: 16 / 9; grid-row: 1; }
    .cta-band__media::after { background: linear-gradient(to bottom, var(--bg), transparent 18%, transparent 70%, var(--bg)); }
    .cta-band__inner { grid-row: 2; margin-top: clamp(-6rem, -8vw, -2rem); justify-items: center; }
  }
  @media (max-width: 900px) {
    .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .page-hero__art { width: min(100%, 22rem); aspect-ratio: 4 / 3.4; }
  }
  @media (max-width: 640px) {
    .contact-list { grid-template-columns: minmax(0, 1fr); }
    .contact-item__value--email { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.5; }
    .cta-band__actions .btn { flex: 1 1 100%; }
    .page-hero__actions .btn { flex: 1 1 100%; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .page-hero::before { animation: none; }
    .course-card, .course-card__media img, .course-card__media--poster::after, .contact-item,
    .shot, .shot img, .shot__veil, .shot__frame, .shot__caption, .shot__zoom, .lightbox__picture img,
    .page-hero__art { transition-duration: 0.01ms; }
    .lightbox__figure { animation: none; }
  }
}