/**
 * @file
 * A single award — the standalone page and, unchanged, the detail dialog.
 *
 * Dubai Design System tokens only; see gdrfad-awards.css for why none of them
 * are defined here and why every offset is a logical property.
 */

.gdrfad-award {
  font-family: var(--font-family, DubaiFont), system-ui, sans-serif;
  color: var(--surface-on-surface, #000);
  background: var(--surface-surface, #fff);
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
}

/* Award artwork is logos and certificates on white canvases, not photography,
   so it is never cropped to fill a band. It is centred and mounted on a plaque
   instead, which turns the artwork's own white margin into a deliberate frame.
   Grid centring rather than text-align: the image field renders inside its own
   wrapper div, and centring has to survive that extra element. */
.gdrfad-award__media {
  display: grid;
  place-items: center;
  padding: var(--padding-padding-xl, 24px);
  background:
    radial-gradient(120% 100% at 50% 0%,
      var(--surface-surface-container-low, #f5f3f7) 0%,
      var(--surface-surface-container, #efedf1) 100%);
  border-block-end: 1px solid var(--surface-outline, #e4e2e6);
}

/* Olivero tags image fields with `wide-content`, a full-bleed helper sized
   against the page layout. Inside a 680px dialog it blows the wrapper out to
   ~996px, so the artwork centres itself inside a box wider than the dialog and
   lands visibly off to one side. Neutralised here rather than in the theme, so
   the module stays theme-agnostic. */
.gdrfad-award__media > *,
.gdrfad-award .wide-content {
  inline-size: auto;
  max-inline-size: 100%;
  /* All four margins: Olivero also puts 36px/72px above and below an image
     field, which is 108px of dead space inside the panel. */
  margin: 0;
}

.gdrfad-award__media img {
  display: block;
  margin-inline: auto;
  inline-size: auto;
  block-size: auto;
  /* Capped so a logo adrift in a big white canvas cannot dominate the dialog. */
  max-inline-size: min(100%, 340px);
  max-block-size: 230px;
  padding: var(--padding-padding-lg, 16px);
  background: var(--surface-surface, #fff);
  border: 1px solid var(--surface-outline, #e4e2e6);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 12px 30px -20px var(--opacity-on-surface-opacity50, #0000007f);
}

.gdrfad-award__body { padding: var(--padding-padding-xxl, 32px); }

.gdrfad-award__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-gap-md, 12px);
  margin: 0 0 var(--gap-gap-lg, 16px);
}

.gdrfad-award__year {
  font-size: var(--font-size-h5, 24px);
  color: var(--secondary-secondary, #7b5809);
}

.gdrfad-award__title {
  margin: 0 0 var(--gap-gap-lg, 16px);
  font-size: var(--font-size-h4, 28px);
  line-height: var(--line-height-h4, 32px);
  letter-spacing: -0.01em;
}

.gdrfad-award__desc {
  font-size: var(--font-size-body, 16px);
  line-height: 1.68;
  color: var(--surface-on-surface-variant, #4a4545);
}

.gdrfad-award__desc p { margin: 0 0 var(--gap-gap-lg, 16px); }
.gdrfad-award__desc p:last-child { margin-block-end: 0; }
.gdrfad-award__desc ul { padding-inline-start: var(--padding-padding-xl, 24px); }

/* ------------------------------------------------------------- dialog ----- */

/* The dialog is opened at a fixed 680px. Without these caps it runs straight
   off a phone screen and the end of every line is cut away — and because the
   dialog is position:fixed, the document's scrollWidth never grows, so no
   overflow check catches it.

   The centring is ours rather than jQuery UI's. jQuery UI measures the panel
   once, at the moment it opens, and writes the resulting offset to inline
   `top`/`left`. The artwork and the webfonts land *after* that, the panel grows
   downward under an offset computed for a shorter box, and the end of it is left
   hanging off the screen — measured 28px past the bottom on a 375px phone, and
   only on the awards whose content happens to grow. Nothing emits a "content
   resized" event to hook, so the offset is abandoned in favour of centring that
   the browser re-resolves on every reflow, whatever the content does afterwards.

   `!important` and physical properties are both forced by what is being
   overridden: jQuery UI's offsets are *inline* styles, which no stylesheet
   selector can outrank, and they are physical `top`/`left`. Setting
   `inset-inline-start` instead would leave that inline `left` in play and
   over-constrain the box under RTL. `translate(-50%, -50%)` is symmetric, so
   this stays direction-neutral despite the physical names — the file's
   logical-properties rule is about layout that mirrors, and centring does not. */
.gdrfad-award-dialog.ui-dialog {
  position: fixed !important;
  inset-block-end: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  max-inline-size: calc(100vw - 2 * var(--gap-gap-lg, 16px));
  max-block-size: calc(100vh - 2 * var(--gap-gap-lg, 16px));
  /* Dynamic viewport units where supported: on a phone `100vh` is the height
     with the URL bar *retracted*, so the cap alone still lets the panel sit
     under the browser chrome. */
  max-block-size: calc(100dvh - 2 * var(--gap-gap-lg, 16px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg, 24px);
  background: var(--surface-surface, #fff);
  box-shadow: 0 40px 90px -30px var(--opacity-on-surface-opacity50, #0000007f);
  overflow: hidden;
}

.gdrfad-award-dialog .ui-dialog-content {
  max-block-size: calc(100vh - 2 * var(--gap-gap-lg, 16px));
  max-block-size: calc(100dvh - 2 * var(--gap-gap-lg, 16px));
  overflow-y: auto;
}

/* The titlebar has to keep real dimensions. Collapsing it to 0x0 leaves the
   close button with nowhere to render, which is how the dialog ended up with no
   visible way out of it. */
.gdrfad-award-dialog .ui-dialog-titlebar {
  position: absolute;
  inset-block-start: var(--gap-gap-md, 12px);
  inset-inline-end: var(--gap-gap-md, 12px);
  /* Drupal puts .ui-dialog-content at z-index 100, so anything lower than that
     is painted over by the award artwork and the close button disappears. */
  z-index: 200;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  background: none;
}

/* The dialog keeps its title as its accessible name — screen readers still
   announce it — but the design draws the heading inside the body, so the
   visible copy is clipped rather than removed. */
.gdrfad-award-dialog .ui-dialog-title {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
}

.gdrfad-award-dialog .ui-dialog-titlebar-close {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--surface-outline, #e4e2e6);
  border-radius: var(--radius-xs, 8px);
  background: var(--surface-surface, #fff);
  color: var(--surface-on-surface, #000);
  /* Collapses jQuery UI's "Close" label, which stays in the accessibility tree
     as the button's name. */
  font-size: 0;
  line-height: 0;
  /* The theme's dialog CSS ships text-indent: -9999px to hide that label. It is
     inherited by the glyph below, which would otherwise be shoved off the
     button — and an offset that large lands in the scrollable direction under
     dir="rtl", which is exactly the pattern this project bans. */
  text-indent: 0;
  cursor: pointer;
}

/* The glyph is drawn here rather than borrowed from jQuery UI's icon sprite,
   which the front-end theme does not load. */
.gdrfad-award-dialog .ui-dialog-titlebar-close::before {
  content: "×";
  font-size: 26px;
  line-height: 1;
}

.gdrfad-award-dialog .ui-dialog-titlebar-close .ui-icon,
.gdrfad-award-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none;
}

.gdrfad-award-dialog .ui-dialog-titlebar-close:hover {
  background: var(--state-layers-surface-hovered, #efedf1);
}

.gdrfad-award-dialog .ui-dialog-titlebar-close:focus-visible {
  outline: 2px solid var(--primary-primary, #8e343e);
  outline-offset: 2px;
}

/* Core's overlay is a 30%-opacity grey, which barely reads as a modal. Scoped
   through :has() so no other dialog on the site is affected — and kept in a
   rule of its own, because a browser that does not know :has() would otherwise
   throw away every selector grouped with it. */
body:has(.gdrfad-award-dialog) .ui-widget-overlay {
  background: var(--surface-on-surface, #000);
  opacity: 0.55;
}

.gdrfad-award-dialog .ui-dialog-content { padding: 0; }
.gdrfad-award-dialog .gdrfad-award { border-radius: 0; }

/* ------------------------------------------------------------ dialog in --- */

/* Entry only, and deliberately so. jQuery UI removes the dialog from the DOM
   the instant it closes, so there is no element left for an exit animation to
   run on — buying one back means adding JavaScript to a module that ships none.

   Each keyframe repeats the centring translate. `transform` is a single
   property, so a keyframe carrying only the scale would drop the -50%/-50% and
   the panel would fly in from the bottom-right quadrant instead of growing from
   the centre. Scaling from just under 1 with the origin left at its default
   centre keeps it pinned while it settles.

   Only a `from` frame: the implied `to` is the element's own computed style, so
   the finished state stays defined once, up in the rule that centres it. */
@keyframes gdrfad-award-dialog-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
}

@keyframes gdrfad-award-overlay-in {
  from { opacity: 0; }
}

.gdrfad-award-dialog.ui-dialog {
  /* `backwards` so the first painted frame is already the opacity-0 state —
     without it the panel shows at full size for a frame before the animation
     takes over, which is the very jump this is meant to remove. */
  animation: gdrfad-award-dialog-in 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Scoped through :has() to match the overlay rule above — the overlay element is
   core's and shared with every other dialog on the site. Kept in its own rule
   for the same reason: a browser without :has() would discard the whole group. */
body:has(.gdrfad-award-dialog) .ui-widget-overlay {
  animation: gdrfad-award-overlay-in 200ms ease-out backwards;
}

/* The panel still needs to arrive — it just arrives without moving, since the
   motion is what causes trouble for vestibular sensitivity, not the fade. */
@media (prefers-reduced-motion: reduce) {
  .gdrfad-award-dialog.ui-dialog {
    animation: gdrfad-award-overlay-in 160ms ease-out backwards;
  }
}

@media (max-width: 640px) {
  .gdrfad-award__body { padding: var(--padding-padding-xl, 24px); }
  .gdrfad-award__title {
    font-size: var(--font-size-h5, 24px);
    line-height: var(--line-height-h5, 32px);
  }
}