/* ===================== Loading / Error States ===================== */
.loading-state, .error-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.8rem; padding: 2.5rem 1rem; color: var(--color-ink-soft);
  font-family: var(--font-ui); font-size: 0.9rem;
}
.spinner {
  width: 34px; height: 34px;
  border: 4px solid var(--color-sky-light);
  border-top-color: var(--color-navy-deep);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Message / Bani Cards (Headmaster, SMC) ===================== */
.message-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 760px) { .message-grid { grid-template-columns: 1fr; } }

.message-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem;
  display: flex;
  gap: 1rem;
  transition: transform var(--transition-base);
}
.message-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.message-card img {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-sky-light);
  flex-shrink: 0;
}
.message-card .name { font-weight: 700; color: var(--color-navy-deep); font-family: var(--font-body); }
.message-card .role { font-size: 0.82rem; color: var(--color-amber-dark); font-family: var(--font-ui); margin-bottom: 0.6rem; }
.message-card p.quote { font-size: 0.92rem; color: var(--color-ink-soft); font-style: italic; }

/* ===================== Card Grid (Teachers / Students / Achievements) ===================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.4rem;
}
.info-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--color-border);
}
.info-card:hover, .info-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* টাচ ডিভাইসে হোভার আটকে থেকে জ্যাঙ্ক এড়াতে - ট্যাপে হালকা স্কেল রেসপন্স */
@media (hover: none) {
  .info-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .info-card:active { transform: scale(0.97); }
}
.info-card .photo-wrap { aspect-ratio: 1/1; overflow: hidden; background: var(--color-sky-light); }
.info-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.info-card:hover img { transform: scale(1.06); }

/* ছবি না থাকলে/লোড ব্যর্থ হলে নামের অক্ষর দিয়ে অ্যাভাটার */
.photo-wrap .avatar-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-white);
}
.modal-header .avatar-fallback {
  width: 90px; height: 90px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-white);
  border: 3px solid var(--color-sky-light);
  flex-shrink: 0;
}
.message-card .avatar-fallback {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-white);
  border: 3px solid var(--color-sky-light);
  flex-shrink: 0;
}
.info-card .card-body { padding: 0.9rem 1rem 1.1rem; }
.info-card .card-name { font-weight: 700; color: var(--color-navy-deep); font-size: 1rem; margin-bottom: 0.2rem; }
.info-card .card-role { font-size: 0.82rem; color: var(--color-ink-soft); font-family: var(--font-ui); }
.info-card .card-tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-paddy-green);
  background: rgba(76,140,107,0.12);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}
.info-card .card-hint {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-sky-blue);
  margin-top: 0.45rem;
}

/* মোবাইলে ফুল-ব্লিড স্কোয়ার ছবি অনেক বড় লাগছিল — তাই ছোট, বৃত্তাকার, বর্ডারযুক্ত করা হলো */
@media (max-width: 600px) {
  .info-card .photo-wrap {
    aspect-ratio: 1/1;
    width: 62%;
    max-width: 108px;
    margin: 1rem auto 0;
    border-radius: 50%;
    border: 3px solid var(--color-sky-light);
    box-shadow: var(--shadow-sm);
  }
  .info-card .card-body { text-align: center; }
  .info-card .photo-wrap .avatar-fallback { font-size: 1.6rem; }
}

/* ===================== Achievement Cards ===================== */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}
.achievement-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--color-amber);
}
.achievement-card .icon { font-size: 1.8rem; margin-bottom: 0.6rem; }
.achievement-card .year { font-family: var(--font-ui); font-size: 0.78rem; color: var(--color-sky-blue); font-weight: 700; }
.achievement-card h4 { font-size: 1rem; margin: 0.4rem 0; }
.achievement-card p { font-size: 0.85rem; color: var(--color-ink-soft); }

/* ===================== Modal ===================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14,58,92,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 1000;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 480px; width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--transition-base);
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-box.modal-wide { max-width: 720px; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-limestone);
  display: grid; place-items: center;
  font-size: 1.2rem;
  color: var(--color-ink);
}
.modal-close:hover { background: var(--color-amber); color: var(--color-white); }
.modal-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.modal-header.modal-header-noimg { display: block; }
.modal-header img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-sky-light); }
.modal-body dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: 0.9rem; }
.modal-body dt { color: var(--color-ink-soft); font-family: var(--font-ui); }
.modal-body dd { color: var(--color-ink); font-weight: 600; }
.modal-body .address-note { margin-top: 1rem; font-size: 0.92rem; color: var(--color-ink-soft); border-top: 1px dashed var(--color-border); padding-top: 1rem; }

/* ===================== Skeleton shimmer (lazy loading placeholder) ===================== */
.skeleton-card {
  background: linear-gradient(90deg, var(--color-border) 25%, #f0efe8 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-md);
  aspect-ratio: 3/4;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ===================== Google Map Widget ===================== */
.map-widget { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-widget iframe { width: 100%; height: 320px; border: 0; display: block; }