/* =========================================================
   Badr Al Safaa Medical Centre — Gallery (master / album grouping)
   Built from Figma file "Badr-Al-Safaa", frame 526:5114
   Loads after style.css + about.css (shared top bar & nav) and footer.css.
   ========================================================= */
.page-gallery { background: #000; }

/* ---------- Hero: ARCHIVES ---------- */
.gal-hero { position: relative; overflow: hidden; height: 505px; background: #000; }
.gal-hero::before { /* campus photo, dimmed and desaturated as in the design */
  content: ""; position: absolute; inset: 0;
  background: url('../assets/gallery-hero.jpg') no-repeat 27.46% 80% / 119.72% auto;
  opacity: 0.27; filter: saturate(0.5);
}
.gal-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,0.65) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.92) 100%);
}
.gal-hero__inner {
  position: relative; z-index: 1; height: 100%; width: min(1184px, calc(100% - 32px)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.gal-hero__badge {
  display: inline-flex; align-items: center; height: 29px; padding: 0 16px;
  border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 999px; background: rgba(212, 175, 55, 0.1);
  font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.8px; color: #e8c33a;
}
.gal-hero__title {
  margin-top: 28.5px; font-family: var(--f-serif); font-weight: 700; font-size: 54px; line-height: 60px; color: #fff;
}
.gal-hero__rule {
  display: block; width: 48px; height: 2px; margin-top: 4px;
  background: linear-gradient(90deg, rgba(212,160,23,0) 0%, #d4a017 50%, rgba(212,160,23,0) 100%);
}
.gal-hero__lead {
  margin-top: 15px; max-width: 660px; font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: 0.7px; color: #aeaeb0;
}

/* ---------- Portfolio (albums) ---------- */
.portfolio { background: #000; padding: 68px 0 72px; }
.portfolio__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 13px; border-bottom: 1px solid #191919;
}
.portfolio__eyebrow { font-size: 11px; line-height: 16px; letter-spacing: 1.2px; color: #bca07b; }
.portfolio__title { margin-top: 0; font-family: var(--f-serif); font-weight: 400; font-size: 32px; line-height: 34px; color: #f8f7f5; }
.portfolio__count { margin-bottom: 0; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: #9f9f9f; white-space: nowrap; }

.album-grid {
  margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.album { position: relative; }
.album[hidden] { display: none; }
.album__link {
  position: relative; display: block; height: 446px; overflow: hidden; border-radius: 4px; background: #111;
  isolation: isolate;
}
.album__img {
  position: absolute; left: 0; top: -40px; width: 100%; height: 553px; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.album__link::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.63); transition: background-color .35s ease;
}
.album__body {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0 16px 8px; text-align: center;
}
.album__title { font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: 0.3px; color: #fff; text-transform: uppercase; }
.album__rule { display: block; width: 24px; height: 1px; background: rgba(231, 220, 200, 0.65); transition: width .35s ease, background-color .35s ease; }
.album__link:hover .album__img, .album__link:focus-visible .album__img { transform: scale(1.04); }
.album__link:hover::after, .album__link:focus-visible::after { background: rgba(0, 0, 0, 0.5); }
.album__link:hover .album__rule, .album__link:focus-visible .album__rule { width: 48px; background: #d4a017; }
.album__link:focus-visible { outline: 2px solid #e6ca65; outline-offset: 3px; }

.portfolio__more { margin-top: 26px; display: flex; justify-content: center; }
.btn-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 204px; height: 36px;
  border: 1px solid #282627; border-radius: 999px; background: #171614;
  font-weight: 500; font-size: 16px; line-height: 20px; color: #dfdedc; transition: border-color .2s, background-color .2s;
}
.btn-more svg { color: #c3986e; transition: transform .25s; }
.btn-more:hover { border-color: #4a4235; background: #1e1c19; }
.btn-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.btn-more[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .album__link { height: 400px; }
  .album__img { height: 124%; top: -9%; }
  .album__title { font-size: 20px; line-height: 28px; }
}
@media (max-width: 860px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gal-hero__lead br { display: none; }
}
@media (max-width: 640px) {
  .gal-hero { height: auto; padding: 72px 0; }
  .gal-hero::before { background-size: cover; background-position: 30% 70%; }
  .gal-hero__title { font-size: 44px; line-height: 50px; }
  .gal-hero__badge { height: auto; padding: 6px 14px; }
  .portfolio { padding: 48px 0 56px; }
  .portfolio__title { font-size: 26px; line-height: 34px; }
  .album-grid { grid-template-columns: minmax(0, 1fr); }
  .album__link { height: 340px; }
}