/* ------- Featured Speakers (agenda page) -------
   Scoped to .au26-fs, a class the JS adds, so nothing else is affected.
   Values measured from the AU 2026 Figma "Speakers - Carousel" frame.

   THE PNG GEOMETRY MATTERS HERE. Every Featured Speaker file is 487x539
   with transparent padding, and the visible gradient panel sits at
   left 58, top 93, width 376, bottom 480 (verified identical across all
   six files). So aligning the <img> box does NOT align the panel. The
   image is scaled and pulled by negative margins until the panel itself
   lands flush with the text. All of that is derived from --fs-panel, so
   changing one number rescales the whole tile correctly. */

.au26-fs {
  --fs-panel: 241px;   /* visible width of the gradient panel (matches Figma) */
  --fs-gap:     76px;  /* 0.314 x panel, as measured in the Figma export */
  --fs-cell:  calc(var(--fs-panel) + var(--fs-gap));
}

/* ------- Heading ------- */

/* Matched to the "Design & Make your AU experience" section below, which
   uses margin-bottom 8px on its h2 and constrains its paragraph to 868px
   (class mw-868). The two paragraphs are now pixel-aligned. */
.au26-fs .targeted-agenda-headline {
  max-width: none !important;
  margin: 0 auto;
  text-align: center;
}

.au26-fs .targeted-agenda-sub-header {
  max-width: 868px !important;
  margin: 0 auto !important;
}

.au26-fs .targeted-agenda-headline h2 {            /* H2, 48/120 */
  font-family: "Artifakt Legend", sans-serif;
  font-size: 48px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: center !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 8px !important;
}

.au26-fs .targeted-agenda-sub-header h3 {          /* Body Medium, 18/150 */
  font-family: "Artifakt Element", sans-serif;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

/* ------- Carousel viewport ------- */

.au26-fs .au26-fs-viewport { position: relative; margin-top: 37px; }

/* 20px of headroom top and bottom so a scaled tile is not clipped by the
   mask's overflow:hidden. The viewport margin above is reduced by the same
   20px, and the negative bottom margin stops it pushing the next section. */
.au26-fs .carousel-mask { padding: 20px 0 !important; margin-bottom: -20px !important; }

.au26-fs .carousel-mask {
  max-width: calc(var(--fs-cell) * 3);
  margin: 0 auto;
  overflow: hidden;
}

.au26-fs .rf-tile-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  transition: transform .45s ease;
  width: auto !important;
  margin: 0 !important;                            /* widget ships margin: 0 -8px */
}

.au26-fs .speaker-tile-container {
  cursor: pointer;                                 /* whole cell opens the modal */
  width: var(--fs-cell) !important;
  flex: 0 0 var(--fs-cell) !important;
  padding: 0 calc(var(--fs-gap) / 2) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.au26-fs .attendee-tile {
  width: var(--fs-panel) !important;
  padding: 0 !important;
  height: auto !important;
  border: 0 !important;
  /* The widget makes this a CENTRED column flex. Anything narrower than
     the tile gets centred, which knocks the text out of line with the
     image. Force left so everything shares one edge. */
  align-items: flex-start !important;
  text-align: left !important;
}

/* ------- Image -------
   The wrap ships width 166 / height 240 / max-height 240. The max-height
   is the one that bites: height:auto alone is silently capped by it. */

.au26-fs .attendee-tile-image {
  width: var(--fs-panel) !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Scale so the 376px panel renders at --fs-panel, then pull the
   transparent padding off each edge. The head deliberately overflows
   above the panel, so only the empty space above it is trimmed. */
.au26-fs .attendee-tile-image img {
  width: calc(var(--fs-panel) * 487 / 376) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block;
  margin-top:    calc(var(--fs-panel) * -51 / 376) !important;
  margin-left:   calc(var(--fs-panel) * -58 / 376) !important;
  margin-bottom: calc(var(--fs-panel) * -58 / 376) !important;
  margin-right: 0 !important;
  pointer-events: none;                            /* transparent overhang */
}

/* ------- Tile text ------- */

.au26-fs .attendee-tile-text-container {
  padding: 33px 0 0 0 !important;
  width: var(--fs-panel);
  text-align: left;
}

.au26-fs .au26-fs-eyebrow {                        /* EYEBROW 1, 16/20 */
  font-family: "Artifakt Element", sans-serif;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: #FFFF00 !important;
  margin: 0 0 14px !important;
}

.au26-fs .attendee-tile-name {                     /* H4, 32/120 */
  font-family: "Artifakt Legend", sans-serif;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: none !important;
  border: 0 !important;
  display: block;
  width: 100%;
  /* widget ships nowrap + ellipsis, which cut the end off longer names */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.au26-fs .attendee-tile-role {                     /* Body 1, 16/150 */
  font-family: "Artifakt Element", sans-serif;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #fff !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;                           /* widget ships padding: 0 24px 20px */
}

.au26-fs .attendee-tile-role br { display: none; } /* title + company on one line */

/* ------- Arrows ------- */

.au26-fs .au26-fs-arrow {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .2s, color .2s;
  z-index: 2;
}

.au26-fs .au26-fs-arrow:hover:not([disabled]) { background: #fff; color: #000; }
.au26-fs .au26-fs-arrow[disabled] { opacity: .45; cursor: default; }

/* The widget renders its OWN arrows into .carousel-actions as soon as it
   decides the track overflows, which happens on narrower viewports. They
   duplicate ours and their scroll would fight our transform. */
.au26-fs .carousel-actions { display: none !important; }

.au26-fs .au26-fs-prev { left: calc(50% - (var(--fs-cell) * 1.5 + 68px)); }
.au26-fs .au26-fs-next { left: calc(50% + (var(--fs-cell) * 1.5 + 68px)); }


/* ------- Hover -------
   The widget paints an overlay via .attendee-tile-image::before (absolutely
   positioned across the image with transition: background .3s). Removed.
   On hover the whole tile scales, so the image and the text below it grow
   together as one unit. Transform is composited, so no reflow and no effect
   on neighbouring tiles. Verified: 241 -> 250.6px with 11px of clearance
   inside the mask at the tightest point. */

.au26-fs .attendee-tile-image::before { display: none !important; }

.au26-fs .attendee-tile {
  position: relative;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}

/* The head deliberately overhangs the panel, and the <img> is
   pointer-events:none, so without this strip the overhanging hair would not
   respond to hover. Invisible, zero layout impact. */
.au26-fs .attendee-tile::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--fs-panel) * -51 / 376);
  height: calc(var(--fs-panel) * 51 / 376);
}

.au26-fs .attendee-tile:hover { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .au26-fs .attendee-tile { transition: none; }
  .au26-fs .attendee-tile:hover { transform: none; }
}

/* ------- Focus -------
   RainFocus paints a focus ring from one of its own (cross-origin, so
   unreadable) stylesheets, which showed as a border after clicking a tile
   or a name. Cleared with a catch-all scoped to this section, so nothing
   else on the site is affected.

   The ring is deliberately KEPT for :focus-visible, i.e. keyboard users
   only. Removing it outright would fail the site's own accessibility
   posture (body carries .rf-accessibility) and make the section
   un-navigable by keyboard. Mouse users never see it. */

.au26-fs *:focus {
  outline: none !important;
  box-shadow: none !important;
}

.au26-fs *:focus-visible {
  outline: 2px solid #FFFF00 !important;
  outline-offset: 4px;
  box-shadow: none !important;
}

/* ------- Speaker modal -------
   NOTE: this is the one block NOT scoped to .au26-fs. The modal is appended
   to <body>, outside the section, so the section scope cannot reach it.
   It is scoped to .tile-details-modal instead, which is the tile-detail
   modal's own wrapper, so other modals on the site are unaffected.

   That wrapper sets color: #fff, which the bio paragraphs inherit, and
   .modal-content is white — so the bio was white on white. The close
   button in the header had the same problem. */

.tile-details-modal,
.tile-details-modal * {
  color: #000 !important;
}

.tile-details-modal a {
  color: #000 !important;
  text-decoration: underline;                      /* keep links distinguishable */
}

.rf-default-modal .modal-header button,
.rf-default-modal .modal-header button svg {
  color: #000 !important;
}

/* Fill only the glyph. Material-style icons include a 24x24 bounding-box
   spacer path carrying fill="none"; a blanket `svg *` rule overrides that
   attribute and paints the whole box solid, which turns the close icon
   into a black square. */
.rf-default-modal .modal-header button svg path:not([fill="none"]) {
  fill: currentColor;
}

/* The social list ships with no bottom margin, so the bio started at the
   exact pixel the icons ended. 24px separates the identity block (name,
   role, socials) from the bio, against the 8px used within that block and
   the 16px between bio paragraphs. */
.tile-details-modal .social-media-links {
  margin-bottom: 24px !important;
}

/* ------- Responsive (PROVISIONAL - not yet matched to a mobile design) -------
   Only the two variables need to change; everything else follows. */

@media (max-width: 1200px) {
  .au26-fs .carousel-mask { max-width: calc(100% - 120px); }
  .au26-fs .au26-fs-prev { left: 24px; transform: translate(0, -50%); }
  .au26-fs .au26-fs-next { left: auto; right: 24px; transform: translate(0, -50%); }
}

@media (max-width: 767px) {
  .au26-fs { --fs-panel: 216px; --fs-gap: 24px; }
  .au26-fs .targeted-agenda-headline h2 { font-size: 32px !important; margin: 0 0 16px !important; }
  .au26-fs .targeted-agenda-sub-header h3 { font-size: 16px !important; }
  .au26-fs .au26-fs-viewport { margin-top: 32px; }
  .au26-fs .carousel-mask { max-width: 100%; }
  .au26-fs .attendee-tile-name { font-size: 24px !important; }
  /* Arrows move BELOW the carousel on mobile. In the side gutters they only
     had ~44px to sit in, and a disabled arrow at 45% opacity against a black
     screen edge reads as simply absent. */
  .au26-fs .au26-fs-viewport { padding-bottom: 56px; }
  .au26-fs .au26-fs-arrow { top: auto; bottom: 0; transform: none; }
  .au26-fs .au26-fs-prev { left: calc(50% - 44px); right: auto; }
  .au26-fs .au26-fs-next { left: calc(50% + 10px); right: auto; }
}