/* ===== Alexander Hoppe — Modern Site Styles ===== */

/* 1) Reset + Base */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg: #0b0d10;
  --bg-soft: #12161b;
  --text: #e6e9ee;
  --muted: #a8b0bd;
  --brand: #7dd3fc;
  --brand-2:#a78bfa;
  --card: rgba(255,255,255,0.06);
  --card-stroke: rgba(255,255,255,0.08);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --max: 1150px;

  /* fluid type */
  --step--1: clamp(0.9rem, 0.82rem + 0.3vw, 1.05rem);
  --step-0: clamp(1.0rem, 0.9rem + 0.5vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.9vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.4rem + 1.2vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.9rem + 1.8vw, 3rem);
  --step-4: clamp(3rem, 2.4rem + 3vw, 4.2rem);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fb; --bg-soft:#fff; --text:#0c0f14; --muted:#566072;
    --card: rgba(10,12,16,0.04);
    --card-stroke: rgba(10,12,16,0.08);
    --shadow: 0 10px 30px rgba(0,0,0,0.12);
  }
}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text); background:
    radial-gradient(1200px 700px at 80% -10%, rgba(125,211,252,0.08), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(167,139,250,0.08), transparent 55%),
    var(--bg);
  line-height:1.6; accent-color:var(--brand);
}

/* 2) Utilities */
.container{width:min(100%,var(--max)); margin-inline:auto; padding-inline: clamp(16px, 2vw, 28px)}
.stack>*+*{margin-top:clamp(12px,2.4vw,24px)}
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.card{background: var(--card); border: 1px solid var(--card-stroke); border-radius: var(--radius); box-shadow: var(--shadow)}
.btn{
  --pad: 0.85rem 1.15rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:var(--pad); border-radius:999px; text-decoration:none; font-weight:700;
  color:#081018; background: linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow: 0 8px 20px rgba(124,58,237,.25); transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 14px 26px rgba(124,58,237,.32)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--card-stroke)}
.badge{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:var(--card); border:1px solid var(--card-stroke); color:var(--muted); font-weight:600; font-size:.9rem}

/* 3) Header / Nav */
.header{
  position:sticky; top:0; z-index:30; border-bottom:1px solid var(--card-stroke);
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--text)}
.brand__logo{width:34px; aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), var(--shadow)}
.brand__text{font-weight:800; letter-spacing:.4px}
.nav__links{display:flex; gap:.6rem; align-items:center}
.nav__links a{color:var(--muted); text-decoration:none; padding:.6rem .9rem; border-radius:10px; font-weight:600}
.nav__links a[aria-current="page"], .nav__links a:hover{color:var(--text); background:var(--card); border:1px solid var(--card-stroke)}
#menu-toggle{display:none}
.menu-btn{display:none; place-items:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--card-stroke); background:var(--card); cursor:pointer}
.menu-btn svg{width:22px; height:22px}
@media (max-width: 880px){
  .menu-btn{display:grid}
  .nav__links{position:fixed; inset:64px 16px auto 16px; top:72px;
    display:grid; gap:8px; padding:12px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--card-stroke); box-shadow:var(--shadow); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease}
  #menu-toggle:checked ~ .nav__links{transform:none; opacity:1; pointer-events:auto}
}

/* 4) Hero */
.hero{
  position:relative; isolation:isolate; min-height: clamp(70vh, 86vh, 92vh);
  display:grid; place-items:center; text-align:center; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    url("https://alexanderhoppe.com/images/calendar-girls-2.jpg") center/cover no-repeat;
  filter:saturate(85%) contrast(105%);
}
.hero h1{font-size:var(--step-4); line-height:1.05; letter-spacing:.5px; margin:0}
.hero p{font-size:var(--step-1); color:var(--muted); max-width: 70ch; margin-inline:auto}
.hero .cta{margin-top: clamp(18px, 3vw, 32px); display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* 5) About */
.section{padding-block: clamp(48px, 8vw, 110px)}
.about{align-items:center; grid-template-columns: 350px 1fr}
.about__img{aspect-ratio:1; border-radius: 18px; background: #111 url("images/headshot-2.jpg") center 10%/cover no-repeat; outline:1px solid var(--card-stroke)}
.about__copy h2{font-size:var(--step-3); margin:0 0 8px}
.about__copy p{font-size:var(--step-0); color:var(--muted); margin:0}
@media (max-width: 900px){ .about{grid-template-columns: 1fr} }

/* 6) Selected work grid — 4 across on desktop */
.work-grid{
  display:grid;
  gap:clamp(16px,2vw,24px);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){
  .work-grid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 780px){
  .work-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 520px){
  .work-grid{grid-template-columns: 1fr}
}
.work-item{position:relative; overflow:hidden; border-radius:16px; background:#0e1116}
.work-item img{width:100%; height:220px; object-fit:cover; display:block; filter:saturate(95%) contrast(104%)}
.work-item .meta{padding:14px}
.work-item h3{font-size:1.05rem; margin:0 0 6px}
.work-item .tag{font-size:.9rem; color:var(--muted)}

/* 7) Contact / Footer */
.contact{
  text-align:center;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(167,139,250,0.12), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(125,211,252,0.12), transparent 55%),
    var(--bg-soft);
  border-top: 1px solid var(--card-stroke);
}
.contact h2{font-size:var(--step-2); margin:0}
.footer{padding-block:20px; border-top:1px solid var(--card-stroke); color:var(--muted); font-size:.95rem}

/* 8) 404 (if you use it elsewhere) */
.hero-404::before{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.4)),
    url("https://alexanderhoppe.com/images/calendar-girls-2.jpg") center/cover no-repeat;
}
.big-404{font-size: clamp(4rem, 20vw, 12rem); line-height:1; letter-spacing: -2px; margin:0}

/* 9) Availability Calendar (home section) */
.avail-hero{text-align:center}
.calendar-wrap{
  margin-top:20px; background:var(--card); border:1px solid var(--card-stroke);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow)
}
.fc{
  --fc-border-color: var(--card-stroke);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: color-mix(in oklab, var(--bg-soft) 88%, transparent);
  --fc-list-event-hover-bg-color: var(--card);
  --fc-today-bg-color: color-mix(in oklab, var(--brand) 18%, transparent);
  color:var(--text);
}
.fc .fc-toolbar-title{font-size:1.25rem}
.fc .fc-button{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:none;
  text-transform:none; font-weight:700; border-radius:10px; padding:.5rem .8rem
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active{filter:brightness(.92)}
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number{color:var(--muted)}
.fc .fc-event{border:1px solid var(--card-stroke); background:color-mix(in oklab, var(--brand) 20%, var(--bg-soft));}
.fc .fc-event-title{font-weight:600}

/* Center the "Selected work" section on the home page */
#work .container { text-align: center; }
.work-head { display:flex; flex-direction:column; align-items:center; gap:10px; }

/* Centering helper */
.center {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* Works tagline */
.page-head .tagline {
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* Works card meta background */
.work-card .meta,
.work-item .meta {
  background: rgba(0, 0, 0, 0.7); /* semi-transparent black */
  color: white;
  padding: 0.5rem;
  border-radius: 0 0 6px 6px; /* soft corners on bottom */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Ensure the card container is positioned for the overlay */
.work-card,
.work-item {
  position: relative;
  overflow: hidden;
}

.work-popup .meta,
.work-popup .content,
.modal .meta,
.lightbox .meta {
  background: rgba(0,0,0,0.85); /* solid black background */
  color: #fff;
  padding: 1.2rem;
  border-radius: 6px;
  max-width: 60ch;
  margin: 1rem auto;
}

/* Modal text panel */
.modal__body > div {
  background: #fff;           /* solid white background */
  color: #000;                /* black text */
  padding: 1.5rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* subtle lift */
}

/* Headings inside modal */
.modal__body h3 {
  color: #000;
  margin-top: 1rem;
}

/* Credits formatting */
.modal__credits {
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Modal close button */
.modal__close svg {
  stroke: #fff;        /* make the "X" white */
  width: 24px;
  height: 24px;
  transition: stroke 0.2s ease;
}

.modal__close:hover svg {
  stroke: #ddd;        /* subtle hover effect */
}