/* about.css
   Nagula / VIC-friendly dark + gold styling
   Works with Bootstrap 5 layouts used in About + Posts sections
*/

/* ---------- Layout helpers ---------- */
.about-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.about-split {
  gap: 2rem;
}

/* ---------- Typography ---------- */
.text-gold {
  color: #d8b35a;
}

.text-magpie {
  color: #6fb7ff;
}

.about-title {
  letter-spacing: .3px;
}

/* ---------- Hero ---------- */
.about-hero {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  background: #0e0f12;
}

.about-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Optional subtle frame */
.about-hero-frame {
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(216,179,90,.12), rgba(255,255,255,.02));
}

/* ---------- Profile card / bio ---------- */
.about-card {
  background: #151821;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.about-card .card-body {
  padding: 1.25rem 1.25rem;
}

.about-meta {
  color: rgba(232,236,242,.72);
  font-size: .95rem;
  line-height: 1.55;
}

/* ---------- Chips / tags style ---------- */
.about-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  color: #d8b35a;
  font-size: .85rem;
}

/* ---------- Section dividers ---------- */
.about-divider {
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 3rem 0;
}

/* ---------- Gallery ---------- */
.about-gallery-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.about-gallery-count {
  color: rgba(232,236,242,.55);
  font-size: .85rem;
}

.about-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #0e0f12;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.about-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease, filter .28s ease;
}

.about-thumb:hover img {
  transform: scale(1.045);
  filter: saturate(1.05);
}

.about-thumb-caption {
  margin-top: .4rem;
  font-size: .85rem;
  color: rgba(232,236,242,.70);
}

/* ---------- Expanded gallery (click-to-focus) ---------- */
.about-gallery-expanded {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #0e0f12;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.about-gallery-expanded img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  background: #0e0f12;
}

.about-gallery-expanded-bar {
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}

.about-gallery-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 5;
  border-radius: 999px;
  padding: .35rem .65rem;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: #e8ecf2;
  line-height: 1;
}

.about-gallery-close:hover {
  background: rgba(0,0,0,.75);
}

/* ---------- Posts ---------- */
.about-post-card {
  background: #151821;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.about-post-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.about-post-title {
  margin: 0;
}

.about-post-meta {
  font-size: .85rem;
  color: rgba(232,236,242,.55);
}

.about-post-excerpt {
  color: #6fb7ff;
  margin-bottom: .75rem;
}

.about-post-body {
  color: rgba(232,236,242,.80);
  line-height: 1.6;
}

/* Post image grid thumbnails */
.about-post-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0f12;
  border: 1px solid rgba(255,255,255,.10);
}

.about-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: #d8b35a;
  border-color: #d8b35a;
  color: #0e0f12;
  font-weight: 600;
}

.btn-gold:hover {
  filter: brightness(1.05);
  color: #0e0f12;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px) {
  .about-section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

@media (max-width: 575.98px) {
  .about-card .card-body {
    padding: 1rem;
  }
}