/* assets/styles.css - Crown Arts Foundation - simple luxe theme */

:root{
  --bg:#050506;
  --card:#0f1720;
  --muted:#9aa3b2;
  --accent:#c9a66b;
  --white:#f7f7f8;
  --maxw:1220px;
  --radius:12px;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:Inter,system-ui,Arial; background:linear-gradient(180deg,#030305 0%,#050506 100%); color:var(--white)}
a{color:var(--accent); text-decoration:none}

/* layout */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* header */
.site-header{ position:sticky; top:0; z-index:30; backdrop-filter: blur(6px); background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01)); border-bottom:1px solid rgba(255,255,255,0.03); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#a57b3c);display:grid;place-items:center;color:black;font-weight:800}
.brand-title{font-weight:700}
.brand-sub{font-size:13px;color:var(--muted)}
/* Logo Styling */
.logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media(max-width: 768px){
  .logo img {
    height: 36px;
  }
}


/* nav */
.nav a{ margin-left:16px; color:var(--muted); font-size:15px; padding:8px 10px; border-radius:8px}
.nav a:hover{ color:var(--white); background:rgba(255,255,255,0.02)}
.nav .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.03); padding:8px 12px; border-radius:8px; color:var(--muted)}

/* hero */
.hero{ padding:64px 0; }
.hero-inner{ display:grid; grid-template-columns: 1fr 380px; gap:36px; align-items:center; }
.kicker{ color:var(--accent); font-weight:700; font-size:13px; letter-spacing:0.6px; }
h1{ font-size:36px; margin:6px 0 12px 0 }
.lead{ color:var(--muted); font-size:16px }
.cta{ background:var(--accent); color:black; padding:10px 16px; border-radius:10px; display:inline-block; font-weight:700; margin-top:12px }

/* hero-card */
.hero-card{ background:var(--glass); padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,0.02) }
.hero-photo{ width:100%; height:240px; object-fit:cover; border-radius:8px }
.meta{ color:var(--muted); font-size:13px }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
}


/* sections */
.section{ padding:48px 0; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); }

/* grids */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:14px;
}

.gallery-grid img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
  padding:4px;
}


/* blog */
.blog-list{ display:grid; gap:14px; }
.blog-item{ display:flex; gap:14px; align-items:center; }
.blog-thumb{ width:180px; height:110px; border-radius:8px; overflow:hidden }

/* footer */
.site-footer{ padding:28px 0; border-top:1px solid rgba(255,255,255,0.03); color:var(--muted) }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }

/* responsive */
@media(max-width:980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
}
@media(max-width:520px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.8s forwards ease;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Universal contain image style */
.img-contain {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  padding: 4px;
}

/* Optional: larger images in blog post pages */
.post-header-img {
  max-height: 420px;
  width: 100%;
  object-fit: contain;
  margin-top: 16px;
}
/* HEADER STRUCTURE */
.site-header {
  background: #000;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* BRAND ALIGNMENT */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.brand-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.brand-sub {
  font-size: 14px;
  opacity: 0.7;
  line-height: 1;
}

/* NAVIGATION DESKTOP */
.nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.btn-ghost {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
}

/* MOBILE MENU ICON */
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* MOBILE LAYOUT */
@media (max-width: 820px){
  .menu-toggle {
    display: block;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }


  .nav {
    display: none;
    position: absolute;
    top: 84px;
    right: 0;
    background: #0a0a0a;
    width: 100%;
    padding: 22px;
    flex-direction: column;
    gap: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nav.show {
    display: flex;
  }
}
/* =======================
   HERO VIDEO SECTION
   ======================= */

.hero-video-section {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
}

.hero-video-text {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 90%;
  max-width: 780px;
  color: white;
  padding: 0 10px;
}

.hero-video-text h1 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-video-text p {
  font-size: 18px;
  opacity: 0.85;
  margin-bottom: 22px;
}

.cta.primary {
  background: #ffffff;
  color: #000;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
}

/* MOBILE RESPONSIVE */
@media (max-width: 820px){
  .hero-video-section {
    height: 48vh;
  }
  .hero-video-text h1 {
    font-size: 28px;
  }
  .hero-video-text p {
    font-size: 15px;
  }
}
/* =======================
   EVENTS PAGE
   ======================= */

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.event-card {
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.event-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.event-body {
  padding: 16px;
}

.event-meta {
  color: #bbb;
  font-size: 14px;
  margin: 6px 0;
}

.event-desc {
  font-size: 15px;
  opacity: 0.85;
}
/* =======================
   PRESS PAGE
   ======================= */

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
}

.press-card {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
}

.press-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.press-body {
  padding: 18px;
  flex: 1;
}

.press-body h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.press-meta {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 12px;
}

.press-desc {
  font-size: 15px;
  opacity: 0.85;
  margin-bottom: 14px;
}

.press-link {
  font-size: 15px;
  text-decoration: none;
  color: #00aaff;
  font-weight: 600;
}
/* =======================
   CONTACT PAGE
   ======================= */

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  margin-top: 40px;
}

.contact-info h3 {
  margin-bottom: 10px;
  font-size: 22px;
}

.contact-info p {
  margin-bottom: 10px;
  opacity: 0.85;
}

.contact-info a {
  color: #00aaff;
  text-decoration: none;
}

.social-links a {
  margin-right: 14px;
  color: #00aaff;
  text-decoration: none;
}

/* CONTACT FORM */
.contact-form label {
  display: block;
  margin-bottom: 18px;
  font-size: 15px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: white;
  font-size: 15px;
}

.contact-form button {
  margin-top: 10px;
}

/* MOBILE */
@media (max-width: 820px){
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}
/* =======================
   LIGHTBOX (FULLSCREEN IMAGE VIEW)
   ======================= */

.lightbox {
  display: none; 
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.lightbox.show {
  display: flex;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  animation: popIn 0.25s ease-out;
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 36px;
  color: white;
  cursor: pointer;
}
/* ==========================================
   MOBILE POLISH (GLOBAL)
   ========================================== */

@media (max-width: 768px) {

  /* General page padding */
  body {
    padding: 0;
    margin: 0;
  }

  .container {
    padding: 0 16px;
  }

  /* Improve headings spacing */
  h1 {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  /* Improve paragraph readability */
  p, .lead {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Fix hero section text alignment */
  .hero-text {
    text-align: center;
    padding: 0 12px;
  }

  /* Blog list cards stack better */
  .blog-item {
    flex-direction: column;
  }

  .blog-thumb {
    height: 180px !important;
  }

  /* Gallery grid tighter spacing */
  .gallery-grid {
    gap: 12px;
  }

  /* Header pretty spacing */
  .site-header {
    padding: 12px 0;
  }

  .brand-text .brand-title {
    font-size: 22px;
  }

  .brand-text .brand-sub {
    font-size: 14px;
  }

  /* Mobile menu buttons larger */
  .nav a {
    padding: 14px 0;
    font-size: 18px;
  }

  /* Footer spacing */
  .site-footer {
    padding: 30px 0;
  }

}
/* Homepage Hero Fix */
@media (max-width: 768px) {
  .hero {
    padding: 40px 0;
  }

  .hero-text {
    margin-top: -20px;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .hero-text p {
    font-size: 16px;
    margin-top: 10px;
  }
}
/* Gallery Page Mobile Polishing */
@media (max-width: 768px) {
  .gallery-grid img {
    border-radius: 10px;
    margin-bottom: 4px;
  }
}
/* Blog List Mobile Fix */
@media (max-width: 768px) {
  .blog-item {
    margin-bottom: 20px;
    padding: 12px;
  }

  .blog-item img {
    border-radius: 8px;
  }
}
/* Single Blog Post Page Mobile Fix */
@media (max-width: 768px) {
  #post-container img {
    width: 100% !important;
    border-radius: 10px;
    margin: 16px 0;
  }

  #post-container {
    padding: 0 6px;
  }

  #post-container h1 {
    margin-bottom: 12px;
  }
}
/* Events Page Mobile Fix */
@media (max-width: 768px) {
  .event-card {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 18px;
  }

  .event-card h3 {
    font-size: 20px;
  }

  .event-card p {
    font-size: 16px;
  }
}
/* Press Page Mobile Fix */
@media (max-width: 768px) {
  .press-card {
    padding: 16px;
    margin-bottom: 18px;
  }

  .press-card img {
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .press-card h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }
}
/* Header mobile polish */
@media (max-width: 768px) {
  .header-inner {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .logo-img {
    width: 38px;
    height: 38px;
  }

  .brand-text .brand-title {
    font-size: 20px;
  }
}
/* Footer mobile polish */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}
/* Smooth fade animation */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
a.cta, .btn-ghost {
  padding: 12px 20px;
  border-radius: 6px;
  transition: background .25s;
}

a.cta:hover {
  background: #333;
  color: #fff;
}
img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  section, .section {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .arm-card {
    padding: 16px;
  }
}

.lightbox {
  backdrop-filter: blur(4px);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ================================
   BOARD OF TRUSTEES SECTION
   ================================ */

.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.bot-card {
  text-align: center;
}

.bot-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

.bot-card h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.bot-card p {
  font-size: 14px;
}
/* ==========================================
   PERFORMING ARMS SECTION (About Page)
   ========================================== */

.arms-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.arm-card {
  background: #111;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  color: #ddd;
}

/* SIDE MARGIN FOR PERFORMING ARMS SECTION */
.arms-wrapper {
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 820px) {
  .arms-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.arms-container {
  padding-left: 12px;
  padding-right: 12px;
}

.arm-card h3 {
  margin-bottom: 4px;
  font-size: 20px;
}

.arm-card p {
  font-size: 15px;
  line-height: 1.55;
}
/* PERFORMING ARMS SPACING FIX */
.arms-container {
  padding: 0 8px; /* elegant breathing room */
  margin-top: 20px;
}

.arm-card {
  padding: 24px;
}

@media (max-width: 768px) {
  .arms-container {
    padding: 0 6px;
    gap: 18px;
  }

  .arm-card {
    padding: 18px;
  }
}

/* Responsive video */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-wrapper iframe {
  width: 100%;
  height: 460px;
  border: 0;
}

@media (max-width: 768px) {
  .video-wrapper iframe {
    height: 250px;
  }
}

/* Make hero text and buttons clickable above overlay */
.hero-video-text {
  position: relative;
  z-index: 10;
}

/* HERO VIDEO FIX — perfect layering */
.hero-video-section {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* background layer */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
  z-index: 2; /* sits above video */
}

.hero-video-text {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 90%;
  max-width: 780px;
  color: white;
  padding: 0 10px;
  z-index: 3; /* sits ABOVE overlay */
  pointer-events: auto;
}

.hero-video-text a,
.hero-video-text * {
  pointer-events: auto;
}
.arm-logo{
  width: 120px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display:block;
  margin: 0 auto 14px auto;
}
.arm-card img{
  width: 100%;
  max-width: 160px;
  height: auto;
}