/* ==========================================================================
   /about/awards — «جوایز و افتخارات هیتکو»

   Everything scoped under `.awd`, per CLAUDE.md rule 5. Logical properties
   throughout, so one set of rules serves fa (RTL) and en (LTR) — except inside
   the lightbox, where two things are deliberately physical and marked.

   Head band matches /catalogues, /partners and /about/csr: this is the fourth
   listing page in the same family and giving it its own header language would
   make the site read as four sites.
   ========================================================================== */

.awd {
  --awd-radius: 16px;
  --awd-frame-h: 190px;
}

/* ================================================================== head */

.awd-head {
  position: relative;
  background: linear-gradient(165deg, var(--c-primary-soft) 0%, var(--c-paper) 60%, var(--c-surface) 100%);
  border-block-end: 1px solid var(--c-line);
  padding-block: var(--s-12) var(--s-10);
  overflow: hidden;
}
.awd-head > .container {
  position: relative;
}

.awd-head__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}
.awd-head__crumb a { color: var(--c-muted); }
.awd-head__crumb a:hover { color: var(--c-primary); }

/* ⚠️ The artwork column is FIRST in source order but sits at the start edge —
   in RTL that is the right, which is where the comp puts it. `order` is not
   used: the text is the reading order and the grid places the art beside it. */
.awd-head__grid {
  display: grid;
  grid-template-columns:  minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.awd-head__txt {
  order: -1;
}

.awd-head__art {
  display: flex;
  justify-content: center;
}
/* The drawing's colours live in `illus.css` (added to this page's extraCss);
   this page owns only where it sits and how big it is. */
.awd-head__art .il {
  max-inline-size: 260px;
}
/* An uploaded render instead of the drawing. Absolute cap + `overflow: hidden`,
   never `max-block-size: 100%` — see frontend.md gotcha 0a. */
.awd-head__art img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 260px;
  block-size: auto;
  object-fit: contain;
}

.awd-head__eyebrow {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-primary-deep);
  background: #fff;
  padding: 4px var(--s-4);
  border-radius: 20px;
  margin: 0 0 var(--s-4);
}

.awd-head__title {
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}

.awd-head__rule {
  display: block;
  inline-size: 56px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-green);
  margin-block: var(--s-4) var(--s-5);
}

.awd-head__lede {
  max-inline-size: 80ch;
  line-height: var(--lh-loose, 1.9);
  color: var(--c-body);
  margin: 0;
}

.awd-head__count {
  margin-block-start: var(--s-6);
  font-size: var(--t-sm);
  color: var(--c-muted);
}
.awd-head__count b {
  color: var(--c-ink);
  font-size: var(--t-lg);
  font-weight: 700;
}

/* ================================================================== grid */

.awd-body {
  padding-block: var(--s-12) var(--sec-y);
}

.awd-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-5);
}

.awd-card {
  display: flex;
}

.awd-card__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--awd-radius);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s),
              transform var(--dur-1, 0.15s);
}
.awd-card__link:hover,
.awd-card__link:focus-visible {
  border-color: var(--c-primary);
  box-shadow: 0 14px 32px rgba(14, 31, 39, 0.1);
  transform: translateY(-2px);
}

/* ⚠️ A FIXED-HEIGHT PLATE WITH `overflow: hidden` AND AN ABSOLUTE CAP.
   `hitco.css` sets `img { max-width: 100%; height: auto }` globally, so an
   image takes the plate's full width and derives its height from its own ratio;
   `max-block-size: 100%` does NOT hold it back. These 26 files run from tall
   trophy shots to landscape certificate scans, so without the cap the tallest
   ones burst out and printed over the award's name. See frontend.md gotcha 0a. */
.awd-card__frame {
  position: relative;
  display: grid;
  place-items: center;
  block-size: var(--awd-frame-h);
  padding: var(--s-2);
  border-radius: 12px;
  background: var(--c-paper);
  overflow: hidden;
}
.awd-card__frame img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: var(--awd-frame-h);
  block-size: auto;
  object-fit: contain;
}

/* The magnifier only appears on hover/focus — a permanent badge on 26 tiles is
   noise, and the whole tile is the target anyway. */
.awd-card__zoom {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-primary);
  opacity: 0;
  transition: opacity var(--dur-1, 0.15s);
}
.awd-card__zoom svg {
  inline-size: 15px;
  block-size: 15px;
}
.awd-card__link:hover .awd-card__zoom,
.awd-card__link:focus-visible .awd-card__zoom {
  opacity: 1;
}

.awd-card__name {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  text-align: center;
}

.awd-empty {
  text-align: center;
  color: var(--c-muted);
}

/* ============================================================== lightbox */

/* A native <dialog>: `::backdrop`, Esc and focus trapping come free. It does
   not render at all until `showModal()`, so no `hidden` is needed. */
.awd-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-inline-size: min(1100px, 94vw);
  max-block-size: 92vh;
  overflow: visible;
}
.awd-modal::backdrop {
  background: rgba(7, 32, 36, 0.78);
}

.awd-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-3);
  color: #fff;
}
.awd-modal__pos {
  font-size: var(--t-sm);
  opacity: 0.85;
}
.awd-modal__x {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-1, 0.15s);
}
.awd-modal__x:hover {
  background: rgba(255, 255, 255, 0.15);
}
.awd-modal__x svg {
  inline-size: 18px;
  block-size: 18px;
}

.awd-modal__fig {
  margin: 0;
  padding: var(--s-4);
  border-radius: var(--awd-radius);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
}
/* Same trap as the card plate: viewport units, not a percentage, or a tall
   certificate scrolls the dialog off the screen. */
.awd-modal__fig img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 72vh;
  block-size: auto;
  object-fit: contain;
}
.awd-modal__cap {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  text-align: center;
}

/* ⚠️ PHYSICAL `left`/`right`, deliberately. The arrows sit either side of the
   picture; in RTL the grid order flips but "the control on the left edge" is
   still the control on the left edge, and mirroring these would move them
   without changing what they do. */
.awd-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(7, 32, 36, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-1, 0.15s);
}
.awd-modal__nav:hover {
  background: rgba(7, 32, 36, 0.85);
}
.awd-modal__nav svg {
  inline-size: 20px;
  block-size: 20px;
}
.awd-modal__nav--prev { right: -21px; }
.awd-modal__nav--next { left: -21px; }
.awd-modal__nav--next svg { transform: rotate(180deg); }

@media (max-width: 760px) {
  .awd-modal { max-inline-size: 94vw; }
  .awd-modal__nav--prev { right: 4px; }
  .awd-modal__nav--next { left: 4px; }
}

/* ============================================================ responsive */

@media (max-width: 860px) {
  /* Words first on a stacked layout, trophy under them — the headline is what
     the visitor came for and must not be pushed below the fold by decoration. */
  .awd-head__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .awd-head__rule {
    margin-inline: auto;
  }
  .awd-head__art .il,
  .awd-head__art img {
    max-inline-size: 200px;
    max-block-size: 200px;
  }
}

@media (max-width: 640px) {
  .awd {
    --awd-frame-h: 150px;
  }
  .awd-head {
    padding-block: var(--s-10) var(--s-8);
  }
  .awd-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s-4);
  }
}

/* Body copy is justified site-wide (`hitco.css`), declared ON the paragraph, so
   it beats a centred container by inheritance. The stacked head centres itself,
   so its paragraphs need the companion — see frontend.md gotcha 00. */
@media (max-width: 860px) {
  .awd-head__grid :where(p) {
    text-align: inherit;
  }
}

/* The lift is decoration; a visitor who asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .awd-card__link {
    transition: border-color var(--dur-1, 0.15s);
  }
  .awd-card__link:hover,
  .awd-card__link:focus-visible {
    transform: none;
  }
}