/*
Theme Name: Ama On Set v4
Author: Ari × Ama
Description: Cinematic portfolio theme for Ama On Set.
Version: 4.1
Text Domain: ama-on-set-v3
*/

/* =========================
   Base
========================= */
:root{
  --bg:#0b0b0b;
  --fg:#ffffff;
  --muted:#6e6e6e;
  --border:rgba(255,255,255,0.2);
  --transition:0.25s ease;
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}

body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   Navbar
========================= */
.aosv3-navbar{
  position:sticky;
  top:0;
  z-index:999;
  background:#0b0b0b;
  color:#fff;
  border-bottom:1px solid var(--border);
}

.aosv3-nav-inner{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:1.25rem;
  align-items:center;
  padding:clamp(10px,2vw,18px) clamp(16px,4vw,48px);
  min-height:72px;
}

.aosv3-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.aosv3-brand-logo{
  width:clamp(28px,5vw,44px);
  height:clamp(28px,5vw,44px);
  object-fit:contain;
}

.aosv3-brand-text{
  font-weight:700;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.aosv3-navlinks .menu{
  margin:0;
  padding:0;
  display:flex;
  gap:clamp(12px,2vw,24px);
  align-items:center;
}

.aosv3-navlinks .menu > li{list-style:none}
.aosv3-navlinks a{
  color:#fff;
  text-decoration:none;
  opacity:.9;
  transition:opacity var(--transition);
}

.aosv3-navlinks a:hover{opacity:1}

/* Search button */
.aosv3-search{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.aosv3-search-btn{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background:transparent;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
  opacity:.95;
}

.aosv3-search-btn:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  opacity:1;
}

.aosv3-cta{justify-self:end}

.aosv3-btn-outline{
  color:#fff;
  border:1px solid #fff;
  background:transparent;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:all var(--transition);
}

.aosv3-btn-outline:hover{
  background:#fff;
  color:#000;
}
/* Primary nav menu spacing (v3-style tighter layout) */
.aosv3-navlinks ul.menu{
  display:flex;
  gap:14px; /* adjust to 16px if you want slightly looser */
  margin:0;
  padding:0;
  list-style:none;
}
.aosv3-navlinks ul.menu > li{
  margin:0;
  padding:0;
}

/* =========================
   Search overlay
========================= */
.aosv3-search-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.82);
  display:none;
  z-index:1000;
  padding:24px;
}

.aosv3-search-overlay.open{display:grid;place-items:center}

.aosv3-search-panel{
  width:min(720px, 92vw);
  background:#101010;
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.aosv3-search-panel form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.aosv3-search-panel input[type="search"]{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.22);
  background:#0b0b0b;
  color:#fff;
  outline:none;
}

.aosv3-search-panel input[type="search"]::placeholder{color:rgba(255,255,255,0.6)}

.aosv3-search-panel button{
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #fff;
  background:#fff;
  color:#000;
  cursor:pointer;
}

.aosv3-search-hint{
  margin:10px 2px 0;
  color:#cfcfcf;
  font-size:0.95rem;
  opacity:0.85;
}

/* =========================
   Mobile Menu / Hamburger
========================= */
.aosv3-burger{
  margin-left:auto;
  display:none;
  width:36px;
  height:24px;
  gap:6px;
  flex-direction:column;
  justify-content:center;
  cursor:pointer;
  background:transparent;
  border:0;
  padding:0;
}

.aosv3-burger span{
  display:block;
  height:2px;
  background:#fff;
  width:100%;
  transition:transform var(--transition),opacity var(--transition);
}

.aosv3-mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.aosv3-mobile-menu.open{display:flex}

.aosv3-mobile-panel{
  text-align:center;
  display:grid;
  gap:18px;
}

.aosv3-mobile-panel .menu{
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}

.aosv3-mobile-panel .menu > li{list-style:none}

.aosv3-mobile-panel a{
  color:#fff;
  text-decoration:none;
  font-size:1.125rem;
}

.aosv3-mobile-cta{margin-top:8px}

/* =========================
   Hero
========================= */
.aosv3-hero{
  position:relative;
  min-height:90vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.aosv3-hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
}

.aosv3-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));
}

.aosv3-hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:24px;
}

.aosv3-hero-title{
  font-size:clamp(28px,5vw,64px);
  margin:0 0 8px;
}

.aosv3-hero-subtitle{
  font-size:clamp(16px,2.8vw,22px);
  color:#ddd;
  margin:0;
}

/* =========================
   Layout / Sections
========================= */
.section{
  padding:clamp(28px,6vw,60px) clamp(16px,4vw,48px);
}

.section h2{
  margin:0 0 16px;
  font-size:clamp(22px,4vw,32px);
}
/* Works filters */
.aosv4-filters{ margin: 0 0 18px; }
.aosv4-filter-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.aosv4-filter-row input[type="search"]{
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
}
.aosv4-filter-row select{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: #0b0b0b;
  color: #fff;
}
.aosv4-clear{
  color:#fff;
  opacity:0.7;
  text-decoration:none;
}
.aosv4-clear:hover{ opacity:1; text-decoration:underline; }

/* =========================
   Grid + Cards (Blog + Work)
========================= */
.grid{
  display:grid;
  gap:clamp(10px,2vw,18px);
}

.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}

/* Cards */
.card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#121212;
  border:1px solid var(--border);
  aspect-ratio:16 / 9;
}

.card a{
  display:block;
  height:100%;
  position:relative;
}

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

.card .caption{
  position:absolute;
  inset:auto 0 0 0;
  padding:10px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));
  color:#fff;
  font-size:.95rem;
  opacity:0;
  transition:opacity var(--transition);
}

.card:hover .caption{opacity:1}

/* Discipline: Works page only - always show captions (if term slug is works) */
.tax-discipline.term-works .card .caption{opacity:1}

.view-all-wrap{
  display:grid;
  place-items:center;
  margin:10px 0 0;
}

.view-all-btn{
  border:1px solid #fff;
  color:#fff;
  background:transparent;
  text-decoration:none;
  padding:10px 18px;
  border-radius:999px;
  transition:all var(--transition);
}

.view-all-btn:hover{
  background:#fff;
  color:#000;
}

/* Pagination */
.aosv3-pagination{
  margin-top: 20px;
  display: grid;
  place-items: center;
}

.aosv3-pagination ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.aosv3-pagination a,
.aosv3-pagination span{
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-block;
  transition: opacity .25s ease, background .25s ease, color .25s ease;
}

.aosv3-pagination a:hover{
  background: #fff;
  color: #000;
}

.aosv3-pagination .current{
  opacity: .65;
}

/* =========================
   Post/Page Content Width + Media
========================= */
.entry-content{
  max-width:900px;
  margin:0 auto;
}

/* Keep media responsive inside content */
.entry-content img,
.entry-content video,
.entry-content iframe{
  max-width:100%;
  height:auto;
}

/* Default video sizing */
.entry-content video{
  width:100%;
  max-width:900px;
  max-height:70vh;
}

/* WP alignments */
.entry-content .alignwide{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.entry-content .alignfull{
  max-width:none;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Video block style sizes (self-hosted video) */
.entry-content .is-style-video-small video{
  max-width:360px;
  width:100%;
  margin:0 auto;
  display:block;
}

.entry-content .is-style-video-medium video{
  max-width:620px;
  width:100%;
  margin:0 auto;
  display:block;
}

/* Embeds (YouTube/Vimeo) keep correct aspect ratio */
.entry-content .wp-block-embed__wrapper{
  position:relative;
  aspect-ratio:16 / 9;
}

.entry-content .wp-block-embed__wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* =========================
   Content link styling
   ========================= */

.entry-content a,
.aosv3-hero-content a,
.aosv4-404-content a{
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease;
}

/* hover */
.entry-content a:hover,
.aosv3-hero-content a:hover,
.aosv4-404-content a:hover{
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,0.9);
}

/* visited should NOT go purple */
.entry-content a:visited,
.aosv3-hero-content a:visited,
.aosv4-404-content a:visited{
  color: rgba(255,255,255,0.85);
}

/* optional: slightly dim external references */
.entry-content a[target="_blank"]{
  text-decoration-style: dotted;
}

/* =========================
   Back to top
========================= */
.aosv3-backtotop{
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(16,16,16,0.85);
  color:#fff;
  display:none;
  place-items:center;
  cursor:pointer;
  z-index:1000;
  transition:opacity var(--transition), transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.aosv3-backtotop.show{display:grid}
.aosv3-backtotop:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-1px)}

/* =========================
   Footer
========================= */
footer.footer{
  background:#0b0b0b;
  color:#fff;
  border-top:1px solid var(--border);
  margin-top:40px;
}

.footer-inner{
  padding:24px clamp(16px,4vw,48px);
  display:grid;
  gap:18px;
}

.footer-top{
  display:grid;
  gap:16px;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.footer-left,.footer-center,.footer-right{
  display:flex;
  align-items:center;
}

.footer-left{
  gap:12px;
  flex-wrap:wrap;
}

.footer-left .label{white-space:nowrap}

.footer-icons{
  display:flex;
  gap:12px;
  align-items:center;
}

.footer-icons a{
  opacity:.9;
  transition:opacity var(--transition);
}

.footer-icons a:hover{opacity:.75}

.footer-center{justify-content:center}

.footer-center img{
  max-height:54px;
  width:auto;
}

.footer-right{
  justify-content:flex-end;
  text-align:right;
  flex-direction:column;
  gap:4px;
}

.footer-right .line1{font-weight:400 !important}
.footer-right .line2{color:#ddd}

.footer-bottom{
  text-align:center;
  border-top:1px solid var(--border);
  padding:12px 0 0;
}

.footer-menu .menu{
  margin:0;
  padding:0;
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
}

.footer-menu .menu > li{list-style:none}

.footer-menu a{
  color:#fff;
  text-decoration:none;
  opacity:.9;
}

.footer-menu a:hover{opacity:1}

.footer-credit{
  color:var(--muted);
  font-size:11px;
  margin-top:6px;
}

/* =========================
   Blog light mode
========================= */
.blog-light{
  background:#f8f8f8;
  color:#111;
}

.blog-light .aosv3-navbar,
.blog-light footer.footer{
  background:#111;
  color:#fff;
}

.blog-light .card{background:#fff}

.blog-light .view-all-btn{
  border-color:#111;
  color:#111;
}

.blog-light .view-all-btn:hover{
  background:#111;
  color:#fff;
}

/* =========================
   Responsive
========================= */
@media (max-width:1100px){
  .grid-cols-4{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:700px){
  .aosv3-nav-inner{grid-template-columns:1fr auto auto}
  .aosv3-navlinks,.aosv3-cta,.aosv3-search{display:none}
  .aosv3-burger{display:flex}

  .footer-top{grid-template-columns:1fr;text-align:center}
  .footer-right{align-items:center;text-align:center}
  .footer-center{order:-1}

  .grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,1fr)}

  .view-all-btn{width:100%;text-align:center}
}

/* =========================
   Fade-in animations
========================= */
.fade-in{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .6s ease,transform .6s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}


/* =========================
   404 Page
========================= */
.aosv4-404-fallback{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,0.06), transparent 45%),
              #0b0b0b;
}
.aosv4-404-actions{
  margin-top:16px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.aosv4-404-content{
  max-width: 760px;
  margin: 12px auto 0;
}