/*
Theme Name: Ibu Arsitek
Theme URI: https://ibuarsitek.org
Description: Custom theme untuk komunitas Ibu Arsitek
Version: 1.0
Author: Ibu Arsitek
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #1a1a1a;
  --white: #fafaf8;
  --warm: #f0ede8;
  --orange: #C8561A;
  --soft-orange: #f5e8df;
  --yellow: #D4C17A;
  --green: #8AAF8E;
  --lavender: #A9A4C4;
  --blue: #7AA8C4;
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;
  --border: 1px solid #e0dbd4;
}

html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--black); font-family: var(--sans); font-weight: 300; overflow-x: hidden; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 4rem; background: var(--white); border-bottom: var(--border); }
.nav-logo { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.logo-block { width: 36px; height: 36px; background: var(--black); display: flex; align-items: center; justify-content: center; }
.logo-block span { color: white; font-family: var(--serif); font-size: 7.5px; line-height: 1.2; text-align: center; font-weight: 400; letter-spacing: 0.03em; }
.logo-text { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.08em; color: var(--black); }
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a { text-decoration: none; color: var(--black); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.25s; }
.nav-links a:hover, .nav-links a.active { color: var(--orange); }
.nav-cta a { background: var(--orange) !important; color: white !important; padding: 0.55rem 1.4rem; }
.nav-cta a:hover { opacity: 0.88; color: white !important; }

/* HAMBURGER — hidden on desktop */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 200; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--black); transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* MOBILE MENU OVERLAY — hidden on desktop */
.mobile-menu { display: none; position: fixed; inset: 0; background: var(--white); z-index: 150; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--serif); font-size: 2rem; font-weight: 300; letter-spacing: 0.06em; color: var(--black); text-decoration: none; transition: color 0.2s; }
.mobile-menu a:hover { color: var(--orange); }
.mobile-menu .mobile-cta { margin-top: 0.5rem; background: var(--orange); color: white !important; padding: 0.75rem 2.5rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; }

/* COLOR STRIP */
.color-strip { display: flex; height: 6px; border-bottom: var(--border); overflow: hidden; }
.color-strip span { flex: 1; }

/* MISC SHARED */
.page-eyebrow { font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.page-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--orange); }

.section-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 3.5rem 4rem 2.5rem; border-bottom: var(--border); }
.section-header h2 { font-family: var(--serif); font-size: clamp(1.8rem, 2.5vw, 2.5rem); font-weight: 300; }
.section-link { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 2px; transition: opacity 0.2s; }
.section-link:hover { opacity: 0.7; }

/* FOOTER */
footer { padding: 2.5rem 4rem; display: flex; align-items: center; justify-content: space-between; background: var(--black); border-top: var(--border); }
.footer-logo { display: flex; align-items: center; gap: 0.75rem; }
.footer-logo .logo-block { width: 30px; height: 30px; }
.footer-logo .logo-block span { font-size: 6.5px; }
.footer-logo-text { font-family: var(--serif); font-size: 0.95rem; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; }
.footer-nav { display: flex; gap: 2rem; list-style: none; }
.footer-nav a { text-decoration: none; color: rgba(255,255,255,0.5); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.2s; }
.footer-nav a:hover { color: white; }
.footer-copy { font-size: 0.65rem; color: rgba(255,255,255,0.3); letter-spacing: 0.1em; }

/* ================================
   MOBILE (max-width: 768px)
   ================================ */
@media (max-width: 768px) {

  /* NAV */
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* COLOR STRIP */
  .color-strip { width: 100%; }

  /* SECTION HEADER */
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 2.5rem 1.5rem 2rem; }

  /* HERO */
  .hero { grid-template-columns: 1fr; min-height: auto; margin-top: 60px; }
  .hero-left { padding: 3rem 1.5rem 2.5rem; border-right: none; border-bottom: var(--border); }
  .hero-left h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-top: 2.5rem; }
  .hero-desc { max-width: 100%; font-size: 0.95rem; line-height: 1.8; word-break: normal; overflow-wrap: break-word; white-space: normal; }
  .hero-cta { width: 100%; text-align: center; padding: 1rem; }
  .hero-right { display: none; }

  /* SLIDESHOW GRID */
  .hero-slideshow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; background: none; border-bottom: var(--border); }
  .slide-cell { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: var(--warm); }
  .slide-cell img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
  .slide-cell img.active { opacity: 1; }
  .slide-cell::before { content: ''; position: absolute; inset: 0; background: var(--cell-bg, var(--warm)); }

  /* ABOUT */
  .about { grid-template-columns: 1fr; }
  .about-label-col { padding: 2rem 1.5rem; border-right: none; border-bottom: var(--border); flex-direction: row; justify-content: flex-start; gap: 2rem; }
  .section-tag { writing-mode: horizontal-tb; transform: none; }
  .about-content { padding: 2rem 1.5rem; }

  /* PROFILES */
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-card:nth-child(2) { border-right: none; }
  .profile-card:nth-child(3) { border-top: var(--border); border-right: var(--border); }
  .profile-card:nth-child(4) { border-top: var(--border); border-right: none; }

  /* EVENTS */
  .events-body { padding: 0 1.5rem; }
  .timeline-row { grid-template-columns: 50px 1fr; gap: 1rem; }
  .tl-year-block { grid-template-columns: 50px 1fr; gap: 1rem; }
  .tl-cards { grid-template-columns: 1fr; }

  /* OPEN CALL */
  .opencall-section { grid-template-columns: 1fr; min-height: auto; }
  .oc-left { padding: 3.5rem 1.5rem; border-right: none; border-bottom: var(--border); }
  .oc-right { padding: 3rem 1.5rem; }

  /* TENTANG */
  .about-full { grid-template-columns: 1fr; }
  .af-left { border-right: none; border-bottom: var(--border); padding: 3rem 1.5rem; }
  .af-right { padding: 3rem 1.5rem; }

  /* OC INTRO */
  .oc-intro { grid-template-columns: 1fr; }
  .oc-intro-left { border-right: none; border-bottom: var(--border); padding: 3rem 1.5rem; }
  .oc-intro-right { padding: 3rem 1.5rem; }

  /* TIMELINE FULL */
  .timeline-full { padding: 0 1.5rem 3rem; }

  /* FOOTER */
  footer { flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem; text-align: center; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 1rem; }

  /* INLINE STYLE OVERRIDE */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* TYPOGRAPHY */
  p, .hero-desc, .body-text { word-break: normal; overflow-wrap: break-word; white-space: normal; }

  /* PAGE HERO */
  .page-hero { padding: 6rem 1.5rem 3rem; min-height: auto; }
  .page-hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
}

@media (max-width: 480px) {
  .hero-left h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .profiles-grid { grid-template-columns: 1fr; }
  /* ================================================
   TAMBAHKAN INI DI DALAM @media (max-width: 768px)
   di style.css, sebelum closing }
   ================================================ */

  /* FIX: Semua div dengan inline grid 2 kolom → 1 kolom */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* FIX: page hero header (Tentang, Acara, Profil, Open Call) */
  div[style*="padding:6rem 4rem"] {
    padding: 5rem 1.5rem 2.5rem !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* FIX: about-full (Tentang Kami) */
  .about-full {
    grid-template-columns: 1fr !important;
  }
  .af-left {
    padding: 2.5rem 1.5rem !important;
    border-right: none !important;
    border-bottom: 1px solid #e0dbd4 !important;
  }
  .af-right {
    padding: 2.5rem 1.5rem !important;
  }

  /* FIX: timeline acara lalu - cards 1 kolom */
  .tl-cards {
    grid-template-columns: 1fr !important;
  }
  .tl-year-block {
    grid-template-columns: 60px 1fr !important;
    gap: 1rem !important;
    padding: 2rem 0 !important;
  }
  .timeline-full {
    padding: 0 1.5rem 3rem !important;
  }

  /* FIX: profiles full grid → 2 kolom di mobile */
  .profiles-full-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* FIX: hero grid kotak - hapus border/gap */
  .hero-slideshow {
    gap: 0 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-bottom: 1px solid #e0dbd4 !important;
  }

/* ================================================
   TAMBAHKAN INI DI DALAM @media (max-width: 768px)
   di style.css, sebelum closing }
   ================================================ */

  /* OPEN CALL — hero header dark (background #1a1a1a) */
  div[style*="background:#1a1a1a"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    padding: 5rem 1.5rem 2.5rem !important;
    gap: 1.5rem !important;
  }

  /* OPEN CALL — oc-intro 2 kolom */
  .oc-intro {
    grid-template-columns: 1fr !important;
  }
  .oc-intro-left {
    padding: 3rem 1.5rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .oc-intro-right {
    padding: 3rem 1.5rem !important;
  }

  /* OPEN CALL — form section (1fr 2fr) */
  section[style*="grid-template-columns:1fr 2fr"],
  section[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    padding: 3rem 1.5rem !important;
    gap: 2rem !important;
  }

  /* OPEN CALL — form grid (2 kolom input) */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-group.full {
    grid-column: 1 !important;
  }

}