/* ==========================================================================
   Bayan University — the department page
   ==========================================================================

   Seven departments, seven pages that should not look like one page seven
   times. What distinguishes them is meant to be the subject, so the subject
   has to be visible: a full-bleed photograph of the actual discipline, the
   department's own colour through the whole page, and its monogram.

   Three custom properties carry the identity, set inline from the record:

       --dept        the department's colour
       --dept-soft   the pale tint that goes with it
       --dept-deep   the same colour at a fifth brightness, for the hero wash

   No rule below hardcodes a colour belonging to a department, so an eighth
   needs a row and a photograph, not a stylesheet.

   Logical properties throughout — these pages run in Kurdish and Arabic.
   ========================================================================== */

.bu-dept-page {
  --dept: var(--bayan-blue, #0066b3);
  --dept-soft: var(--bayan-blue-pale, #e5ebf4);
  --dept-deep: #0a2540;
}

/* ==========================================================================
   1. Hero
   ==========================================================================
   Full-bleed subject photography under a gradient in the department's own
   deep tone. It replaces the site's shared banner on these pages, so it has
   to do that banner's job too: the site header is transparent and its links
   are white, which is why the gradient starts at 0.88 rather than somewhere
   prettier. Content sits at the bottom, where a photograph's least important
   region usually is and where a long department name has room to wrap. */

.bu-dh {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 82vh, 840px);
  padding-block: 190px 68px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--dept-deep);
}

.bu-dh__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

/* Two washes. The vertical one carries the white text top and bottom and lets
   the middle of the photograph through; the second leans the department's
   colour in from the leading edge so the picture is tinted rather than merely
   darkened, which is what stops seven photographs reading as stock. */
.bu-dh__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Every number here was measured against all seven photographs, in both
     text directions, over a zone spanning the full container width — wider
     than any heading actually sets, so the figures hold for a longer
     department name than exists today and for Kurdish and Arabic, where the
     text sits on the other side.
     Two earlier attempts failed. The first used `to inline-end`, which
     gradients do not accept; the invalid keyword took the whole shorthand
     down with it and the hero rendered with no wash at all. The second tinted
     the side with the department's colour at full brightness, which for the
     four warm departments *lightened* the picture — Business Administration's
     text zone measured 3.58:1. Halving the side colour's brightness alone
     lifted the header strip from 4.43 to 6.67.
     What is here now is the lightest ramp that clears 4.5 everywhere: worst
     case across the seven is 7.63 for the header's links and 5.25 for the
     text, both on the brightest photograph. */
  background:
    linear-gradient(
      180deg,
      rgb(var(--dept-deep-rgb) / 0.92) 0%,
      rgb(var(--dept-deep-rgb) / 0.64) 20%,
      rgb(var(--dept-deep-rgb) / 0.86) 40%,
      rgb(var(--dept-deep-rgb) / 0.98) 100%
    ),
    /* the department's hue leaning in from the leading edge, so the picture is
       tinted and not only darkened. `to right`, not `to inline-end`: gradients
       take physical directions only, and the RTL flip is the rule below. */
    linear-gradient(
      to right,
      rgb(var(--dept-mid-rgb) / 0.45) 0%,
      rgb(var(--dept-mid-rgb) / 0) 70%
    );
}

[dir="rtl"] .bu-dh__wash {
  background:
    linear-gradient(
      180deg,
      rgb(var(--dept-deep-rgb) / 0.92) 0%,
      rgb(var(--dept-deep-rgb) / 0.64) 20%,
      rgb(var(--dept-deep-rgb) / 0.86) 40%,
      rgb(var(--dept-deep-rgb) / 0.98) 100%
    ),
    linear-gradient(
      to left,
      rgb(var(--dept-mid-rgb) / 0.45) 0%,
      rgb(var(--dept-mid-rgb) / 0) 70%
    );
}

.bu-dh__inner {
  position: relative;
  width: 100%;
}

/* ---- eyebrow: monogram + college ---------------------------------------- */

.bu-dh__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.bu-dh__mono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.14);
  /* The frosted chip only reads as glass over a photograph, which is exactly
     where it sits. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bu-dh__college {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.bu-dh__college:hover,
.bu-dh__college:focus-visible {
  color: #fff;
  border-color: #fff;
}

/* ---- title and lead ------------------------------------------------------ */

.bu-dh__title {
  margin: 0 0 20px;
  max-width: 17ch;
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 4.15rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  /* The template capitalises every word, which rewrites a stored name. */
  text-transform: none;
  text-wrap: balance;
}

.bu-dh__lead {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.25vw, 1.19rem);
  line-height: 1.75;
}

/* ---- the facts, as chips over the photograph ----------------------------- */

.bu-dh__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.bu-dh__facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14.5px;
}
.bu-dh__facts b {
  font-weight: 700;
}
.bu-dh__facts span {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- the motif, very large and very faint -------------------------------- */
/* Painted rather than placed: a block of white with the drawing as a mask, so
   one file serves seven departments. Set from the page, and only where art
   exists — a mask that fails to load is ignored, which would leave a solid
   rectangle. */

.bu-dh__motif {
  position: absolute;
  inset-block-end: -8%;
  inset-inline-end: -4%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  z-index: -1;
  background-color: #fff;
  opacity: 0.07;
  -webkit-mask: var(--dept-motif) center / contain no-repeat;
  mask: var(--dept-motif) center / contain no-repeat;
  pointer-events: none;
}

/* ---- motion ---------------------------------------------------------------
   Entrance only, and CSS only.
   The site ships WOW.js and the rest of the pages use it, but it works by
   writing inline styles onto elements before React hydrates, which is already
   the source of a hydration warning in the footer on every page. Adding more
   of them here would add more. These are keyframes on elements that are in
   view at load, so there is nothing to observe and nothing to script: the
   content rises into place once, in the order it should be read.
   The photograph drifts very slowly behind it — 24 seconds for a 6% scale, so
   it reads as depth rather than as movement. */

@keyframes bu-dh-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bu-dh-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

.bu-dh__eyebrow,
.bu-dh__title,
.bu-dh__lead,
.bu-dh__facts {
  animation: bu-dh-rise 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.bu-dh__eyebrow {
  animation-delay: 0.05s;
}
.bu-dh__title {
  animation-delay: 0.13s;
}
.bu-dh__lead {
  animation-delay: 0.23s;
}
.bu-dh__facts {
  animation-delay: 0.33s;
}

.bu-dh__media {
  animation: bu-dh-drift 24s ease-out both;
}

/* The motif fades in last and stays; it is the slowest thing on the page.
   Its own keyframe, because `bu-dh-rise` ends at `opacity: 1` and an
   animation with `both` holds its last frame — which overrode the 0.07 the
   rule sets and left a bank, a globe and a set of scales blazing white across
   the hero. */
@keyframes bu-dh-motif-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 0.07;
    transform: none;
  }
}
.bu-dh__motif {
  animation: bu-dh-motif-in 1.6s 0.4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .bu-dh__eyebrow,
  .bu-dh__title,
  .bu-dh__lead,
  .bu-dh__facts,
  .bu-dh__media {
    animation: none;
  }
  /* Not `none`: without the animation the motif would need its opacity from
     the rule, which is where it already is. */
  .bu-dh__motif {
    animation: none;
  }
}

/* ==========================================================================
   Tracking, and Arabic
   ==========================================================================
   Every `letter-spacing` on this page is reset for RTL. Latin small-caps
   labels want tracking; Arabic and Kurdish are cursive scripts and tracking
   pulls the joins apart, so the same rule that makes an English eyebrow look
   considered makes a Kurdish one look broken. */

[dir="rtl"] .bu-dh__mono,
[dir="rtl"] .bu-dh__college,
[dir="rtl"] .bu-dstmt__eyebrow,
[dir="rtl"] .bu-dfacts__label,
[dir="rtl"] .bu-dept-rail h3 {
  letter-spacing: 0;
}

/* ==========================================================================
   The statement
   ==========================================================================
   The welcome, set large.

   It used to sit in the hero at 1.19rem under the title, as the fourth object
   competing for the bottom of a photograph. The same three sentences at
   2.1rem on cream read as an institution speaking rather than as a caption —
   same bytes, different register — and taking them out of the hero leaves the
   name room to be the name. */

.bu-dstmt {
  padding-block: clamp(64px, 8vw, 108px);
  background: var(--bayan-cream, #f7f5f2);
}

.bu-dstmt__inner {
  position: relative;
  max-width: 46ch;
}

.bu-dstmt__eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--dept);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.155em;
  text-transform: uppercase;
}

.bu-dstmt p {
  margin: 0;
  color: var(--bayan-brown-deep, #33200a);
  font-size: clamp(1.34rem, 2.4vw, 2.05rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* The department's own drawing, out in the margin at a size where it is a
   picture rather than a bullet. */
.bu-dstmt__motif {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-end: -260px;
  width: 210px;
  aspect-ratio: 1;
  background-color: var(--dept);
  opacity: 0.16;
  -webkit-mask: var(--dept-motif) center / contain no-repeat;
  mask: var(--dept-motif) center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .bu-dstmt__motif {
    display: none;
  }
}

/* ==========================================================================
   The facts band
   ==========================================================================
   Facts on a photograph are decoration; on a hairline grid at 2.2rem they are
   the thing a prospective student came to read. Two to four cells, depending
   on what the record actually holds. */

.bu-dfacts {
  border-block: 1px solid rgba(51, 32, 10, 0.1);
}

.bu-dfacts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.bu-dfacts__cell {
  padding: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 32px);
  border-inline-start: 1px solid rgba(51, 32, 10, 0.1);
}
.bu-dfacts__cell:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.bu-dfacts__label {
  display: block;
  margin-bottom: 10px;
  color: rgba(51, 32, 10, 0.5);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bu-dfacts__value {
  display: block;
  color: var(--bayan-brown-deep, #33200a);
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.2;
  /* Numbers line up between cells. */
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

/* ==========================================================================
   2. Body — a sticky rail beside the prose
   ========================================================================== */

.bu-dept-body {
  padding-block: clamp(56px, 7vw, 96px);
}

.bu-dept-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.bu-dept-body__prose h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  color: var(--bayan-brown-deep, #33200a);
  text-transform: none;
}

/* A short rule in the department's colour, which is a cheaper and better
   signal of "this section belongs to this department" than tinting the whole
   panel was. */
.bu-dept-body__rule {
  width: 56px;
  height: 4px;
  margin-bottom: 26px;
  border-radius: 2px;
  background: var(--dept);
}

.bu-dept-body__prose p {
  max-width: 68ch;
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.92;
  color: rgba(51, 32, 10, 0.78);
}
.bu-dept-body__prose p:last-child {
  margin-bottom: 0;
}

/* The opening paragraph carries the eye in. */
.bu-dept-body__prose p:first-of-type {
  font-size: 18.5px;
  line-height: 1.8;
  color: rgba(51, 32, 10, 0.9);
}

/* ---- the rail ------------------------------------------------------------ */

.bu-dept-rail {
  position: sticky;
  top: 104px;
  padding: 28px 26px;
  border-radius: 20px;
  background: var(--dept-soft);
  /* A hairline of the department's colour rather than a border all the way
     round, which would box it in next to the prose. */
  box-shadow: inset 0 3px 0 0 var(--dept);
}

.bu-dept-rail h3 {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dept);
}

.bu-dept-rail dl {
  margin: 0;
}
.bu-dept-rail dt {
  color: rgba(51, 32, 10, 0.58);
  font-size: 13.5px;
  font-weight: 500;
}
.bu-dept-rail dd {
  margin: 2px 0 16px;
  color: var(--bayan-brown-deep, #33200a);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
}
.bu-dept-rail dd:last-child {
  margin-bottom: 0;
}

.bu-dept-rail__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--dept);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.bu-dept-rail__cta:hover,
.bu-dept-rail__cta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(51, 32, 10, 0.2);
}
[dir="rtl"] .bu-dept-rail__cta i {
  transform: scaleX(-1);
}

/* ==========================================================================
   3. The other departments in the same college
   ========================================================================== */

.bu-dept-more {
  padding-block: 0 clamp(56px, 7vw, 96px);
}

.bu-dept-more h2 {
  margin: 0 0 26px;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--bayan-brown-deep, #33200a);
  text-transform: none;
}

.bu-dept-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 22px;
}

/* Each sibling shows its own photograph, so the row is a row of subjects
   rather than a row of links.
 *
 * `.bu-dsib`, not `.bu-dept-card`: that name belongs to the cards on the
 * /programs listing and has since long before this page existed. Taking it
 * here put a near-black background, a dark gradient and an absolutely
 * positioned image onto all seven of those cards, which is what turned that
 * page into a grid of grey boxes. */
.bu-dsib {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 216px;
  padding: 22px;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
  background: #1b1b1b;
  color: #fff;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.4s ease;
}
.bu-dsib img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bu-dsib::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(20, 16, 8, 0.15) 0%,
    rgba(20, 16, 8, 0.62) 58%,
    rgba(20, 16, 8, 0.9) 100%
  );
}
.bu-dsib:hover,
.bu-dsib:focus-visible {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(51, 32, 10, 0.22);
}
.bu-dsib:hover img,
.bu-dsib:focus-visible img {
  transform: scale(1.06);
}

.bu-dsib__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

/* The department's own colour, as a bar along the bottom edge. */
.bu-dsib__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 4px;
  background: var(--card-dept, var(--dept));
}

/* ==========================================================================
   Narrow
   ========================================================================== */

@media (max-width: 991px) {
  .bu-dept-body__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bu-dept-rail {
    position: static;
  }
}

@media (max-width: 767px) {
  .bu-dh {
    min-height: 520px;
    padding-block: 150px 44px;
  }
  .bu-dh__mono {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 11.5px;
  }
  .bu-dh__title {
    max-width: none;
  }
  .bu-dh__facts li {
    padding: 9px 15px;
    font-size: 13.5px;
  }
  .bu-dh__motif {
    width: 70vw;
    opacity: 0.05;
  }
}

/* ==========================================================================
   The skeleton, for loading.tsx
   ========================================================================== */

.bu-dept-skel {
  background-color: rgba(51, 32, 10, 0.08);
  border-radius: 8px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  background-size: 220% 100%;
  /* A slow sweep rather than a pulse: at this size a pulse reads as the page
     flickering. */
  animation: bu-dept-sweep 1.6s ease-in-out infinite;
}
.bu-dept-skel--onDark {
  background-color: rgba(255, 255, 255, 0.14);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
}

@keyframes bu-dept-sweep {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bu-dept-skel {
    animation: none;
  }
  .bu-dsib,
  .bu-dsib img,
  .bu-dept-rail__cta {
    transition: none;
  }
}

/* ==========================================================================
   The contents list in the rail
   ==========================================================================
   These descriptions are imported reference prose — two run past sixteen
   thousand characters — and they arrive with their own headings buried inside
   as ordinary paragraphs: "Chairmans Speech", "Section message",
   "Description:". Rendered flat they were an undifferentiated column. Promoted
   to real headings they give the rail something true to list, and the wall
   becomes a document. */

.bu-dept-toc {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.bu-dept-toc li + li {
  margin-top: 2px;
}
.bu-dept-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: rgba(51, 32, 10, 0.72);
  font-size: 14px;
  line-height: 1.4;
  text-transform: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.bu-dept-toc a:hover,
.bu-dept-toc a:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  color: var(--bayan-brown-deep, #33200a);
}

/* Headings promoted out of the imported prose. */
.bu-dept-body__prose h3 {
  margin: 40px 0 14px;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--bayan-brown-deep, #33200a);
  text-transform: none;
  /* Clears the sticky site header when jumped to from the contents. */
  scroll-margin-top: 110px;
}
.bu-dept-body__prose h3:first-child {
  margin-top: 0;
}