/* Visual refinement for the existing conference page.
   The page width, section spacing, card grids, type scale and media ratios
   remain in styles.css. All identity geometry comes from approved assets. */

.icon-image {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}

.package-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.package-name h3 { min-width: 0; }

.package-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: radial-gradient(ellipse at 100% 0, rgba(208, 221, 231, .24), transparent 64%);
}

.package-card::before {
  content: '';
  position: absolute;
  top: 23px;
  right: 18px;
  width: 72px;
  height: 38px;
  background: url('./assets/mark-outline.svg') center / contain no-repeat;
  opacity: .09;
  pointer-events: none;
  z-index: -1;
}

.package-card.vision-card {
  background-image: radial-gradient(ellipse at 100% 0, rgba(208, 221, 231, .36), transparent 70%);
}

.package-card.vision-card::before { opacity: .16; }

/* Icons occupy the existing two-line strip; they introduce no new row. */
.intro-strip .wrap > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
}

.intro-strip .wrap > span > .icon-image {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 28px;
  height: 28px;
}

.intro-strip .wrap > span > strong,
.intro-strip .wrap > span > .intro-detail { grid-column: 2; }

.intro-strip .wrap > span > .intro-detail { font: inherit; }

.hero-pattern {
  position: absolute;
  right: -20px;
  bottom: -16px;
  width: 34%;
  height: 165px;
  z-index: 0;
  background: url('./assets/mark-outline.svg') 0 0 / 48px 25px repeat;
  opacity: .14;
  -webkit-mask-image: linear-gradient(135deg, transparent 8%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 8%, #000 100%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 1; }

/* Optional framed footage stays inside the existing right side of the hero. */
.hero-frame-collage {
  position: absolute;
  inset: 16% 5% 16% auto;
  width: 33%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  pointer-events: none;
  z-index: 0;
}

.hero-frame-collage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
}

.hero-frame-collage img:first-child { grid-column: 1 / -1; }

.hero-media-play {
  position: absolute;
  right: 7%;
  bottom: 62px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 4px;
  background: rgba(31, 32, 31, .84);
  color: #fff;
  font: 600 13px/1.3 Arial, Helvetica, sans-serif;
  text-decoration: none;
  z-index: 2;
}

.hero-media-play .icon-image { width: 20px; height: 20px; flex-basis: 20px; }
.hero-media-play:hover { background: rgba(31, 32, 31, .96); }
.hero-media-play:focus-visible { outline-color: #fff; }

.work-card { position: relative; }
.work-info { position: relative; }

/* The recency label uses the existing caption gap, outside the photograph. */
.work-info > .recent-event-label {
  position: absolute;
  top: -17px;
  left: 0;
  color: var(--accent-strong);
  font: 600 10px/12px Arial, Helvetica, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.work-card.is-recent .work-image-button { box-shadow: 0 0 0 1px var(--accent); }

.work-caption-label {
  color: var(--accent-strong);
  font-size: 12px;
  line-height: 1.4;
}

.play-symbol .icon-image {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* A video replaces its poster in place, without changing the frame. */
.work-image-button .media-video,
.work-image-button .media-video iframe,
.work-image-button .media-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #1f201f;
}

.work-image-button .media-video video { object-fit: contain; }
.work-image-button.is-playing img { visibility: hidden; }
.work-image-button.is-playing .play-symbol { display: none; }

.team-allocation article { position: relative; overflow: hidden; }

.team-allocation article > .icon-image {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  opacity: .14;
  pointer-events: none;
}

.team-allocation h3,
.team-allocation p { position: relative; }

.finder-result { position: relative; isolation: isolate; overflow: hidden; }

.finder-result::before {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 145px;
  height: 125px;
  background: url('./assets/mark-outline.svg') 0 0 / 48px 25px repeat;
  opacity: .12;
  -webkit-mask-image: linear-gradient(135deg, transparent 8%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 8%, #000 100%);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .package-card { background-image: radial-gradient(ellipse at 100% 0, rgba(109, 129, 150, .13), transparent 64%); }
}

:root[data-theme=dark] .package-card { background-image: radial-gradient(ellipse at 100% 0, rgba(109, 129, 150, .13), transparent 64%); }

@media (max-width: 1100px) {
  .hero-frame-collage { right: 4%; width: 31%; }
  .hero-media-play { right: 5%; bottom: 44px; }
}

@media (max-width: 767px) {
  .intro-strip .wrap > span {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 10px;
    display: block;
    padding-left: 34px;
    position: relative;
  }

  .intro-strip .wrap > span > .icon-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
  }

  .intro-strip .wrap > span > .intro-detail { display: inline; }
  .package-name { gap: 10px; }
  .package-card::before { right: 24px; }
  .hero-pattern { width: 48%; height: 125px; opacity: .1; }
  .hero-frame-collage { display: none; }
  .hero-media-play { right: 6%; bottom: 20px; min-height: 40px; padding: 9px 12px; }
  .work-info > .recent-event-label { top: -14px; font-size: 9px; line-height: 11px; }
  .team-allocation article > .icon-image { top: 10px; right: 9px; width: 28px; height: 28px; opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .work-image-button img,
  .hero-media-play { transition: none; }
  .work-image-button:hover img { transform: none; }
}

@media print {
  .hero-pattern,
  .hero-frame-collage,
  .hero-media-play,
  .package-card::before,
  .finder-result::before,
  .team-allocation article > .icon-image { display: none; }
  .package-card,
  .package-card.vision-card { background-image: none; }
  .work-card.is-recent .work-image-button { box-shadow: 0 0 0 1px #6d8196; }
  .work-info > .recent-event-label { color: #394956; }
}

/* The poster remains in normal flow, reserving exactly its original height. */
.featured-media{display:block}
.work-play-trigger{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;color:#fff;border-radius:6px}
.work-play-trigger:hover .play-symbol{background:rgba(31,32,31,.97);border-color:#fff}
.featured-media .media-video[hidden],.work-play-trigger[hidden],.media-reset[hidden]{display:none}
.media-reset{position:absolute;top:12px;right:12px;z-index:1;padding:10px 14px;min-height:42px;border:1px solid #c8d5df;border-radius:4px;background:#1f201f;color:#fff;font-size:13px}
.hero .actions .icon-image{width:20px;height:20px;flex-basis:20px}
.hero-frame-collage{inset:auto 4% 42px auto;width:min(32%,360px);height:84px;grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.hero-frame-collage img:first-child{grid-column:auto}
@media(max-width:767px){.hero-frame-collage{display:none}}
.film-play-glyph{width:20px;flex:0 0 20px;font-size:15px;text-align:center}
.featured-media>img{object-position:70% center}
.work-info h3 a{text-decoration:none;text-underline-offset:5px}
.work-info h3 a:hover{text-decoration:underline}
.work-info>.recent-event-label{font-size:11px;line-height:14px;top:-18px}
.work-image-button img.letterbox-crop{transform:scale(1.35)}
.work-image-button:hover img.letterbox-crop{transform:scale(1.39)}
.intro-strip .wrap>span{grid-template-columns:24px minmax(0,1fr);column-gap:8px}
.intro-strip .wrap>span>.icon-image{width:24px;height:24px}
@media(prefers-reduced-motion:reduce){.work-image-button:hover img.letterbox-crop{transform:scale(1.35)}}