/* ==========================================================================
   Bengal Photographer — Navy & Gold theme
   ========================================================================== */

:root {
  --navy: #142850;
  --navy-dark: #0d1c3a;
  --navy-soft: #24406f;
  --gold: #ffc72c;
  --gold-dark: #e8b31d;
  --bg: #ffffff;
  --bg-soft: #f4f7fb;
  --bg-soft-2: #eaf0f8;
  --ink: #1c2536;
  --muted: #68738a;
  --line: #e3e9f2;
  --card-shadow: 0 10px 30px rgba(20, 40, 80, 0.08);
  --font-head: "Poppins", "Noto Sans Bengali", "Segoe UI", sans-serif;
  --font-body: "Open Sans", "Noto Sans Bengali", system-ui, sans-serif;
  --font-script: "Yellowtail", cursive;
  --container: 1180px;
  --radius: 10px;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* A #anchor link — "Affiliated Associations" on the home page, for instance —
   should settle with the section's eyebrow and heading clear of the sticky
   header, not tucked underneath it.  150px clears the header's ~142px plus a
   little breathing room. */
section[id] { scroll-margin-top: 150px; }
/* Headings and other marked landing points clear the sticky header the same
   way sections do. */
[data-anchor] { scroll-margin-top: 150px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* height:auto keeps the ratio when the CSS width and the width/height
   attributes disagree — without it a portrait-height attribute stretches a
   landscape photograph to fill a narrow column. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.25;
  font-weight: 700;
}

.container { width: min(var(--container), 92%); margin-inline: auto; }
section { padding: 78px 0; }

/* ---------- Eyebrow with gold dash ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

.section-title { font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 14px; }
.section-intro { max-width: 560px; color: var(--muted); margin-bottom: 40px; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .section-intro { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-yellow { background: var(--gold); color: var(--navy); box-shadow: 0 8px 20px rgba(255, 199, 44, 0.35); }
.btn-yellow:hover { background: var(--gold-dark); }

.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(20, 40, 80, 0.25); }
.btn-navy:hover { background: var(--navy-soft); }

.btn-outline-white { border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--navy); }

.btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  padding: 9px 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.topbar-left { display: flex; gap: 26px; flex-wrap: wrap; }
.topbar-left a { display: inline-flex; align-items: center; gap: 8px; }
.topbar-left a:hover { color: var(--gold); }

.topbar-right { display: flex; align-items: center; gap: 18px; }

.topbar-social { display: flex; gap: 14px; }
.topbar-social a { display: grid; place-items: center; opacity: 0.85; }
.topbar-social a:hover { opacity: 1; color: var(--gold); }

/* A social channel with no address configured leaves no icon behind —
   apply-config.js marks it, and here it goes. */
.topbar-social a.is-empty { display: none; }
.topbar-social svg { width: 15px; height: 15px; fill: currentColor; }

.topbar-search {
  display: flex;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  overflow: hidden;
}

.topbar-search input {
  background: none;
  border: none;
  padding: 5px 12px;
  color: #fff;
  font-size: 13px;
  width: 130px;
}

.topbar-search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.topbar-search input:focus { outline: none; }

.topbar-search button { padding: 4px 12px; color: #fff; }
.topbar-search button:hover { color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled { box-shadow: 0 6px 24px rgba(20, 40, 80, 0.1); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-logo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex-shrink: 0;
  background: #fff;
}

.brand-logo svg { width: 30px; height: 30px; fill: currentColor; }

.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.brand-tagline {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.14em;
}

/* ---------- Navigation ---------- */
/* Nine links, and one of them is "Affiliated Associations".  The row must
   stay under ~720px or it squeezes the logo and name into four lines and
   the sticky header swallows a fifth of the screen. */
.nav-list { display: flex; gap: 13px; }

.nav-list a {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-list a:hover { color: var(--navy-soft); }
.nav-list a.active { color: var(--gold-dark); border-bottom-color: var(--gold); }

/* ---------- Nav: Admin Login (lock icon + same font & colour as the rest of the menu) ---------- */
.nav-lock {
  width: 14px;
  height: 14px;
  fill: currentColor;
  vertical-align: -2px;
  margin-right: 5px;
}

/* ---------- Nav: Login dropdown (Admin Login / Association Login) ---------- */
.nav-drop { position: relative; }

/* Button must lay out exactly like the sibling links (they are inline with
   vertical padding that does not grow the line box), or the header row
   would get taller than before. */
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-drop-btn:hover { color: var(--navy-soft); }
.nav-drop-btn .nav-lock { vertical-align: 0; }

.nav-caret {
  width: 13px;
  height: 13px;
  fill: currentColor;
  margin-left: 3px;
  transition: transform 0.2s ease;
}
.nav-drop.open .nav-caret { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 235px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(20, 40, 80, 0.16);
  display: none;
  z-index: 130;
}
.nav-drop.open .nav-drop-menu { display: block; }

/* The menu links are inside .nav-list, so they must beat the plain
   .nav-list a rules (font, colour, the 3px active underline). */
.nav-list .nav-drop-menu a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  border: 0;
  border-radius: 7px;
  white-space: nowrap;
}
.nav-list .nav-drop-menu li + li { margin-top: 2px; }
.nav-list .nav-drop-menu a:hover { color: var(--navy-soft); background: #f2f6fb; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero slider ---------- */
.hero-slider {
  position: relative;
  height: min(620px, 88vh);
  overflow: hidden;
  background: var(--navy-dark);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active { opacity: 1; z-index: 1; }

.slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 42, 0.82) 0%, rgba(10, 20, 42, 0.45) 55%, rgba(10, 20, 42, 0.15) 100%);
}

.slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  color: #fff;
}

.slide-content .welcome {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.slide-content h1 {
  color: #fff;
  font-size: clamp(34px, 5.2vw, 58px);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 18px;
}

.slide-content h1 span { color: var(--gold); }

.slide-content p {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin-bottom: 30px;
}

.slide-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-script {
  position: absolute;
  right: 4%;
  bottom: 12%;
  z-index: 3;
  font-family: var(--font-script);
  font-size: clamp(28px, 4vw, 46px);
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-4deg);
  pointer-events: none;
}

.hero-script em { display: block; color: var(--gold); font-style: normal; }

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  transition: background 0.25s ease;
}

.slider-arrow:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.slider-arrow.prev { left: 18px; }
.slider-arrow.next { right: 18px; }

.slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.slider-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.25s ease, transform 0.25s ease;
}

.slider-dots button.active { background: var(--gold); transform: scale(1.15); }

/* ---------- Features strip ---------- */
.features-strip { padding: 54px 0; background: #fff; }

.features-grid {
  display: grid;
  /* Nine features now.  Four across keeps every title to one or two lines in
     the 1180px container; the ninth card lands alone on the last row, so it
     widens across the middle two columns instead of being stranded at the
     left edge. */
  grid-template-columns: repeat(4, 1fr);
}
/* Only on the four-across desktop grid — on the three- and one-column
   breakpoints below, this would park the ninth card in a column that does
   not exist. */
@media (min-width: 1025px) {
  .features-grid > :last-child:nth-child(4n + 1) { grid-column: 2 / span 2; }
}

.feature-item {
  text-align: center;
  padding: 10px 22px;
  border-left: 1px solid var(--line);
}

.feature-item:first-child { border-left: none; }
/* Fourth card opens the second row, so its divider would hang in mid-air. */
.feature-item:nth-child(5) { border-left: none; }

/* Two of the cards lead somewhere.  They look identical to the rest — only
   the cursor and the focus ring give it away. */
a.feature-item { display: block; color: inherit; text-decoration: none; }
a.feature-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

.feature-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff7e0;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: var(--navy);
  transition: transform 0.3s ease, background 0.3s ease;
}

.feature-item:hover .feature-icon { transform: translateY(-5px); background: var(--gold); }

.feature-icon svg { width: 28px; height: 28px; fill: currentColor; }

.feature-item h3 { font-size: 16.5px; margin-bottom: 8px; }
.feature-item p { font-size: 14px; color: var(--muted); }

/* ---------- About section ---------- */
.about-section { background: var(--bg-soft); }

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 1fr;
  gap: 44px;
  align-items: center;
}

.about-photo { position: relative; }

.about-photo img {
  width: 100%;
  border-radius: 12px 90px 12px 90px;
  box-shadow: var(--card-shadow);
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 3px solid var(--gold);
  border-radius: 12px 90px 12px 90px;
  z-index: -1;
}

.about-content p { margin-bottom: 26px; }

.info-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 12px 26px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.info-row:last-child { border-bottom: none; }

.info-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-soft-2);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex-shrink: 0;
}

.info-icon svg { width: 20px; height: 20px; fill: currentColor; }

.info-row .label {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.info-row .value {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: 14.5px;
  word-break: break-word;
}

.info-row a.value:hover { color: var(--navy-soft); }

/* ---------- Section head (title left + button right) ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}

/* ---------- Events ---------- */
.events-section { background: var(--bg-soft-2); }

.event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.event-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 24px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(20, 40, 80, 0.14); }

.event-top { display: flex; gap: 16px; align-items: flex-start; }

.event-date {
  text-align: center;
  font-family: var(--font-head);
  min-width: 58px;
}

.event-date .m { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); }
.event-date .d { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.event-date .y { font-size: 12px; color: var(--muted); }

.event-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.event-card .meta { font-size: 13.5px; color: var(--muted); }

.event-card .more {
  margin-top: auto;
  align-self: flex-end;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.event-card:hover .more { color: var(--gold-dark); transform: translateX(4px); }

/* ---------- Gallery highlights ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.gallery-grid a {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--bg-soft-2);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 80, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-grid a:hover img { transform: scale(1.08); }
.gallery-grid a:hover::after { opacity: 1; }

/* ---------- Masonry gallery (gallery page) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }

.filter-btn {
  padding: 9px 22px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.25s ease;
}

.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.masonry { columns: 3; column-gap: 18px; }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 18px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft-2);
}

.masonry-item img { width: 100%; transition: transform 0.6s ease; }

/* Photographs are display-only.  Nothing here stops someone determined
   enough to open developer tools — see js/no-download.js for what this
   pair of rules is actually for: keeping the save menu off the picture. */
.masonry-item,
.masonry-item img,
.lightbox img,
.exhibit-frame,
.exhibit-frame img,
.exhibit-thumb,
.exhibit-cell,
.exhibit-cell img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Keeps the browser from turning the picture into a draggable object,
   which is the other half of the desktop "drag it to your desktop" move. */
.masonry-item img,
.lightbox img,
.exhibit-frame img,
.exhibit-cell img {
  -webkit-user-drag: none;
  user-drag: none;
}
.masonry-item:hover img { transform: scale(1.05); }
.masonry-item.hidden { display: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 18, 36, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-btn {
  position: absolute;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  padding: 18px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  user-select: none;
}

.lightbox-btn:hover { opacity: 1; }
.lightbox-close { top: 12px; right: 16px; font-size: 40px; }
.lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); }

.lightbox-caption {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background:
    linear-gradient(90deg, rgba(10, 20, 42, 0.85), rgba(10, 20, 42, 0.55)),
    var(--hero-img, none) center/cover no-repeat;
  background-color: var(--navy-dark);
  padding: 92px 0;
  text-align: center;
  color: #fff;
}

.page-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 50px); text-transform: uppercase; margin-bottom: 12px; }
.page-hero p { max-width: 540px; margin-inline: auto; color: rgba(255, 255, 255, 0.82); }

.page-hero .breadcrumb {
  display: inline-flex;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* ---------- Services / pricing cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s ease;
}

.service-card:hover { transform: translateY(-6px); }

.service-card--featured { border: 2px solid var(--gold); position: relative; }

.service-card--featured::before {
  content: "POPULAR";
  position: absolute;
  top: -13px;
  left: 30px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 14px;
  border-radius: 4px;
}

.service-card h3 { font-size: 22px; margin-bottom: 6px; }
.service-card .desc { font-size: 14.5px; color: var(--muted); }

.service-card .price {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 700;
  color: var(--navy);
  margin: 18px 0;
}

.service-card .price small { font-size: 14px; font-weight: 500; color: var(--muted); }

.service-card ul { margin-bottom: 28px; }

.service-card ul li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.service-card ul li::before { content: "✓"; color: var(--gold-dark); font-weight: 700; }
.service-card .btn { margin-top: auto; justify-content: center; }

/* ---------- Stats ---------- */
.stats-band { background: var(--navy); color: #fff; padding: 56px 0; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.stat { text-align: center; }

.stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 700;
  color: var(--gold);
}

.stat span {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Split (about / contact pages) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img { width: 100%; border-radius: var(--radius); box-shadow: var(--card-shadow); }
.split .section-title { margin-bottom: 18px; }
.split p + p { margin-top: 14px; }

/* ---------- Testimonial ---------- */
.testimonial { max-width: 720px; margin-inline: auto; text-align: center; }

.testimonial blockquote {
  font-family: var(--font-head);
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 18px;
}

.testimonial cite {
  font-style: normal;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background:
    linear-gradient(90deg, rgba(10, 20, 42, 0.88), rgba(10, 20, 42, 0.6)),
    url("https://picsum.photos/seed/bpctaband/1600/400") center/cover no-repeat;
  padding: 64px 0;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.cta-inner h2 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 6px; }
.cta-inner p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; }

.contact-info li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.contact-info .label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.contact-info .value { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 15.5px; }
.contact-info a.value:hover { color: var(--navy-soft); }

.form-group { margin-bottom: 18px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

label {
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

input, select, textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.25s ease;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
textarea { resize: vertical; min-height: 130px; }

.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

.form-success {
  display: none;
  padding: 14px 18px;
  background: #eaf7ee;
  border: 1px solid #c9e8d2;
  color: #2c6b3a;
  border-radius: 6px;
  margin-bottom: 18px;
}

.form-success.show { display: block; }
.form-success.error { background: #fdecec; border-color: #f5c2c2; color: #9b2c2c; }
.form-success.error a { color: inherit; font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: rgba(255, 255, 255, 0.78); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1fr;
  gap: 48px;
  padding: 62px 0 44px;
}

.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

.footer-brand .brand-logo { border-color: #fff; color: #fff; background: transparent; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-tagline { color: rgba(255, 255, 255, 0.65); }

.site-footer h4 {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 12px;
}

.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.footer-links a { display: inline-block; padding: 5px 0; font-size: 14.5px; transition: color 0.2s ease, padding-left 0.2s ease; }
.footer-links a:hover { color: var(--gold); padding-left: 5px; }

.footer-contact li { padding: 6px 0; font-size: 14.5px; }
.footer-contact a:hover { color: var(--gold); }

.footer-social { display: flex; gap: 12px; }

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
}

.footer-bottom .heart { color: #ff5a5a; }

/* ---------- Hidden admin link (only the owner knows it) ---------- */
.footer-bottom .admin-eye {
  align-self: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0.28;
  text-decoration: none;
  filter: grayscale(1);
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.footer-bottom .admin-eye:hover,
.footer-bottom .admin-eye:focus {
  opacity: 1;
  filter: none;
  transform: scale(1.3);
}

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s ease;
}

.whatsapp-fab:hover { transform: scale(1.08); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-list { gap: 14px; }
  .nav-list a { font-size: 13px; }
  .nav-lock { width: 12px; height: 12px; margin-right: 4px; }
  .features-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 0; }
  /* Rows now start at cards 1, 4 and 7 — and the four-column rule that
     suppresses card 5's divider no longer applies here. */
  .feature-item:nth-child(4),
  .feature-item:nth-child(7) { border-left: none; }
  .feature-item:nth-child(5) { border-left: 1px solid var(--line); }
  .about-grid { grid-template-columns: 1fr 1.3fr; }
  .about-grid .info-card { grid-column: 1 / -1; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .topbar { display: none; }
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--navy-dark);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .main-nav.open { opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; text-align: center; gap: 24px; }
  .nav-list a { color: #fff; font-size: 18px; border-bottom-color: transparent; }
  .nav-list a.active { color: var(--gold); border-bottom-color: transparent; }
  .nav-list a.nav-admin { color: #fff; }
  .nav-lock { width: 17px; height: 17px; }

  /* Login dropdown inside the fullscreen overlay nav — flow below the
     trigger instead of floating (the li is centred in the column). */
  .nav-drop-btn { color: #fff; font-size: 18px; padding: 6px 0; }
  .nav-drop-menu {
    position: static;
    width: min(74vw, 270px);
    margin: 12px auto 0;
    box-shadow: none;
  }
  .nav-list .nav-drop-menu a { color: var(--navy); font-size: 15px; text-align: center; }

  .split, .contact-grid { grid-template-columns: 1fr; gap: 38px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .masonry { columns: 2; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-script { display: none; }
  .slider-arrow { display: none; }
}

@media (max-width: 620px) {
  section { padding: 56px 0; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-item { border-left: none; }
  .event-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 1; }
  .form-row { grid-template-columns: 1fr; }
  .brand-name { font-size: 17px; }
  .brand-logo { width: 52px; height: 52px; }
  .hero-slider { height: 560px; }
}

/* ---------- Logo image handling ---------- */
img.brand-logo {
  width: auto;
  height: 86px;
  border: none;
  border-radius: 10px;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 620px) {
  img.brand-logo { height: 64px; }
}

.footer-logo-box {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 16px;
}

.footer-logo-box img { height: 92px; width: auto; object-fit: contain; }

/* ---------- Registration badge ---------- */
.reg-badge {
  display: inline-block;
  background: #fff7e0;
  border: 1.5px dashed var(--gold);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border-radius: 30px;
  margin-top: 16px;
}

/* ---------- Notice cards ---------- */
.notice-list { display: grid; gap: 22px; }

.notice-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 26px 28px;
}

.notice-card .notice-date {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.notice-card h3 { font-size: 19px; margin-bottom: 10px; }
.notice-card p { font-size: 15px; color: var(--muted); }
.notice-card p + p { margin-top: 10px; }
.notice-card .sign { margin-top: 14px; font-family: var(--font-head); font-weight: 600; color: var(--ink); }

/* ---------- District association cards ---------- */
.district-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.district-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.district-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(20, 40, 80, 0.13); }

.district-card .reg {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
}

.district-card h3 { font-size: 17px; line-height: 1.35; }

.district-card .district {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-soft);
  background: var(--bg-soft-2);
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: 20px;
}

.district-card ul { margin: 8px 0 4px; }
.district-card ul li { font-size: 14px; padding: 3px 0; color: var(--muted); }
.district-card ul li strong { color: var(--ink); font-family: var(--font-head); font-weight: 600; }
.district-card a.contact-link { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; font-family: var(--font-head); color: var(--navy); word-break: break-word; }
.district-card a.contact-link:hover { color: var(--gold-dark); }

/* District website row — shows the association's subdomain site. */
.district-card .site-row { margin-top: 6px; font-size: 14px; font-family: var(--font-head); }
.district-card .site-row strong { color: var(--ink); font-weight: 600; }
/* The display text carries a <wbr> after the subdomain label, so long hosts
   wrap at the dot instead of mid-word; break-word stays as last resort. */
.district-card .site-row a { color: var(--navy-soft); font-weight: 600; word-break: normal; overflow-wrap: break-word; }
.district-card .site-row a:hover { color: var(--gold-dark); text-decoration: underline; }

/* ---------- People / committee grid ---------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.person-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* A gold-to-navy spine that only appears on hover: enough to read the row
   under the cursor without turning nine static cards into nine buttons. */
.person-chip::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--navy));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.person-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 12px 26px rgba(20, 40, 80, 0.13);
}
.person-chip:hover::before { opacity: 1; }

.person-chip .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.35);
}

/* An uploaded photograph replaces the initials rather than sitting beside
   them — one avatar slot, two possible occupants. */
.person-chip .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-chip .who { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.person-chip .role { font-size: 13px; color: var(--muted); margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  .person-chip, .person-chip::before { transition: none; }
  .person-chip:hover { transform: none; }
}

/* ---------- Sub heading with icon ---------- */
.sub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 44px 0 20px;
}

.sub-head::before {
  content: "";
  width: 6px;
  height: 24px;
  background: var(--gold);
  border-radius: 3px;
}

/* ---------- Content box (Bengali long text etc.) ---------- */
.content-box {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 34px 36px;
}

.content-box h3 { font-size: 21px; margin-bottom: 12px; color: var(--navy); }
.content-box p { font-size: 15.5px; }
.content-box p + h3 { margin-top: 26px; }

/* ---------- Responsive additions ---------- */
@media (max-width: 1024px) {
  .district-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .district-grid, .people-grid { grid-template-columns: 1fr; }
  .content-box { padding: 24px 20px; }
}

/* ==========================================================================
   Member directory
   Colours are the site's own navy and gold, so the cards read as part of
   WBPWA rather than as a widget dropped in from elsewhere.
   ========================================================================== */

.dir-section { padding: 60px 0; background: var(--bg-soft); }

/* ---------- stat bar + view toggle ---------- */
.dir-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.dir-stats { display: flex; background: var(--navy); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.dir-stat { padding: 14px 26px; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.dir-stat:first-child { border-left: none; }
.dir-stat strong { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.dir-stat span { font-size: 11px; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.72); }

.dir-viewtoggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.dir-viewtoggle button { width: 40px; height: 38px; font-size: 16px; color: var(--muted); }
.dir-viewtoggle button.active { background: var(--navy); color: var(--gold); }

/* ---------- search ---------- */
.dir-search { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.dir-search input {
  flex: 1 1 320px; padding: 13px 18px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
}
.dir-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.25); }
.dir-count { font-size: 14px; white-space: nowrap; }
.dir-count b { color: var(--navy); font-family: var(--font-head); }

/* ---------- quick filter chips ---------- */
.dir-quick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.dir-quick-label { font-size: 11.5px; letter-spacing: 0.09em; font-weight: 600; color: var(--muted); }
.dir-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 500; color: var(--ink); transition: 0.2s;
}
.dir-chip b { font-family: var(--font-head); font-size: 12px; color: var(--muted); }
.dir-chip:hover { border-color: var(--gold-dark); }
.dir-chip.active { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }
.dir-chip.active b { color: var(--navy-dark); }

/* ---------- dropdown filters ---------- */
.dir-filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.dir-field { display: block; }
.dir-field span { display: block; font-size: 11.5px; letter-spacing: 0.07em; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.dir-field select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.dir-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.25); }

/* ---------- filter reset ---------- */
.dir-filterfoot {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: -6px 0 20px;
}
.dir-activecount {
  padding: 5px 13px; border-radius: 999px; background: var(--navy); color: var(--gold);
  font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
}
.dir-reset {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--navy);
  transition: 0.2s;
}
.dir-reset:hover { border-color: var(--gold-dark); background: var(--gold); color: var(--navy-dark); }
.dir-reset:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- pagination ---------- */
.dir-pager {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  justify-content: center; margin: 22px 0 6px;
}
.dir-pager button {
  min-width: 40px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--navy);
  transition: 0.18s;
}
.dir-pager button:hover:not(:disabled) { border-color: var(--gold-dark); background: var(--gold); }
.dir-pager button.active {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 4px 12px rgba(20, 40, 80, 0.25);
}
.dir-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.dir-pager button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dir-pager .dir-step { padding: 9px 18px; }
.dir-pager .dir-ellipsis { padding: 0 3px; color: var(--muted); }

@media (max-width: 640px) {
  .dir-pager button { min-width: 36px; padding: 8px 11px; font-size: 13.5px; }
  .dir-pager .dir-step { padding: 8px 13px; }
}

/* ---------- pagination bar ---------- */
.dir-pagebar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px;
}
.dir-perpage { display: flex; align-items: center; gap: 6px; }
.dir-perpage button { padding: 5px 12px; border-radius: 6px; font-size: 13px; font-family: var(--font-head); color: var(--muted); border: 1px solid transparent; }
.dir-perpage button.active { background: var(--navy); color: #fff; }
.dir-perpage button:not(.active):hover { border-color: var(--line); color: var(--navy); }

/* ---------- grid of cards ---------- */
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.dir-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--card-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dir-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 40, 80, 0.14); }

.dir-card-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--navy); }
.dir-id { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); }
.dir-issued {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85);
}
.dir-issued.ok::before { content: "✓"; color: #5ce08d; }
.dir-issued:not(.ok) { background: rgba(255, 199, 44, 0.2); color: var(--gold); }
.dir-blood {
  margin-left: auto; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; font-family: var(--font-head);
}
.blood-a { background: #e0455c; } .blood-b { background: #d63b7a; }
.blood-o { background: #c9472f; } .blood-ab { background: #8e3fb5; }

.dir-card-body { display: flex; gap: 12px; padding: 16px 14px 12px; }
.dir-avatar {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
  background: var(--bg-soft-2); overflow: hidden; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 22px; color: var(--navy-soft);
}
.dir-avatar.sm { width: 52px; height: 52px; }
.dir-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dir-avatar img.failed { display: none; }
.dir-id-main h3 { font-size: 15.5px; line-height: 1.3; margin-bottom: 6px; word-break: break-word; }
.dir-role {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  background: #eaf1ff; color: var(--navy-soft); margin-bottom: 6px;
}
.dir-badge.gold { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #fff5d9; color: #9a7208; }

.dir-facts { padding: 0 14px 12px; display: grid; gap: 4px; }
.dir-facts > div { display: flex; gap: 7px; font-size: 13.5px; }
.dir-facts dt { flex: 0 0 auto; color: var(--muted); }
.dir-facts dd { color: var(--muted); word-break: break-word; }

.dir-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.dir-wa {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; font-family: var(--font-head);
  background: #e7f8ee; color: #128c4b;
}
.dir-wa:hover { background: #128c4b; color: #fff; }
.dir-tel { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--navy); font-family: var(--font-head); }
.dir-tel:hover { color: var(--gold-dark); }
.dir-nophone { font-size: 13px; color: var(--muted); font-style: italic; }

/* ---------- list view ---------- */
.dir-grid.as-list { grid-template-columns: 1fr; gap: 12px; }
.dir-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-shadow);
}
.dir-row-main { flex: 1 1 auto; min-width: 0; }
.dir-row-main h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15.5px; }
.dir-row-main .dir-role { margin: 4px 0 2px; }
.dir-row-meta { display: block; font-size: 13.5px; color: var(--muted); }
.dir-row .dir-actions { margin-top: 0; padding: 0; border: none; background: none; }

/* ---------- states ---------- */
.dir-loading { display: flex; align-items: center; gap: 10px; padding: 60px 0; justify-content: center; font-size: 15px; }
.dir-loading span { width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: dir-spin 0.8s linear infinite; }
@keyframes dir-spin { to { transform: rotate(360deg); } }

.dir-empty { padding: 60px 20px; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); font-size: 15px; }

.dir-setup { padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.dir-setup h3 { margin-bottom: 10px; }
.dir-setup p { margin-bottom: 14px; }
.dir-setup ol { padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }
.dir-setup code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--bg-soft-2); color: var(--navy); font-size: 13.5px; word-break: break-all; }
.dir-setup.error { border-color: #f3c1c9; background: #fdf2f4; }
.dir-retry { margin-top: 8px; padding: 9px 20px; border-radius: 8px; background: var(--navy); color: #fff; font-family: var(--font-head); font-size: 14px; }

/* ---------- directory responsive ---------- */
@media (max-width: 1100px) {
  .dir-grid { grid-template-columns: repeat(3, 1fr); }
  .dir-filters { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .dir-grid { grid-template-columns: repeat(2, 1fr); }
  .dir-filters { grid-template-columns: repeat(2, 1fr); }
  .dir-stats { width: 100%; }
  .dir-stat { flex: 1; padding: 12px 14px; }
}
@media (max-width: 560px) {
  .dir-grid { grid-template-columns: 1fr; }
  .dir-filters { grid-template-columns: 1fr; }
  .dir-row { flex-wrap: wrap; }
  .dir-row .dir-actions { width: 100%; }
  .dir-section { padding: 40px 0; }
}