/* ===== FREEMAN – Projektseite ===== */
:root{
  --side: 86px;
  --side-m: 20px;
  --black: #000;
  --white: #fff;
  --muted: #cfcfcf;
}

.freeman-body{ background:#000; margin:0; }
#freeman-page, #freeman-page * { box-sizing:border-box; }
#freeman-page img { display:block; max-width:100%; height:auto; }

#freeman-page h1, #freeman-page h2, #freeman-page h3, #freeman-page h4, #freeman-page h5, #freeman-page h6{
  font-family:"Swear Display", serif !important; font-weight:400; color:#fff;
}
#freeman-page p, #freeman-page .copy, #freeman-page li, #freeman-page .h-head{
  font-family:"Swear Text", serif !important; font-weight:400; color:#fff;
}
#freeman-page .is-italic{ font-style:italic; }

/* HERO */
#freeman-page .hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:#000;
  color:#fff;
}
#freeman-page .hero-bg{
  position:relative;
  width:100%;
  height:76vh;
  min-height:720px;
  background:url('https://designbymichelle.de/wp-content/uploads/2025/09/FREEMAN_Hero_01_Desktop_Webp-scaled.webp') center/cover no-repeat;
}

/* Desktop Overlay unverändert */
#freeman-page .hero-inner{
  position:absolute;
  inset:0;
  max-width:1920px;
  margin:0 auto;
  padding:40px var(--side) 80px;
  display:flex;
  flex-direction:column;
}
#freeman-page .pill-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:42px; padding:0 18px;
  border:1px solid var(--white);
  border-radius:999px;
  background:transparent; color:#fff; cursor:pointer;
  font-family:"Swear Display", serif !important; font-size:20px; line-height:1;
  transition:background .2s, color .2s, border-color .2s;
}
#freeman-page .pill-btn:hover{ background:#fff; color:#000; border-color:#fff; }
#freeman-page .pill-x{ font-size:20px; line-height:1; }
#freeman-page .close-btn{ align-self:flex-end; }
#freeman-page .hero-grid{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width:1024px){
  #freeman-page .hero-grid{ grid-template-columns:1fr; gap:24px; }
}
#freeman-page .project-name{ font-size:48px; letter-spacing:-.01em; }
#freeman-page .project-short{ font-size:22px; }
#freeman-page .meta-inline{ display:flex; flex-wrap:wrap; gap:16px; }
#freeman-page .content-desc{ font-size:22px; }
#freeman-page .hero-copy{ margin-top:18px; }
#freeman-page .copy{ font-size:19px; line-height:1.55; color:#e7e7e7; }

/* Collapsible Button standardmäßig ausblenden */
#freeman-page .more-btn{ display:none; }

/* GALLERY Desktop/Tablet */
#freeman-page .gallery{ background:#000; padding:24px 0 0 0; }
#freeman-page .gallery-viewport{ position:relative; max-width:1920px; margin:0 auto; padding:0 var(--side); overflow:hidden; }
#freeman-page .gallery-track{ display:flex; align-items:stretch; gap:10px; transition:transform .35s ease; }
#freeman-page .slide{ flex:0 0 auto; width:calc((100% - 20px)/3); height:430px; background:#111; overflow:hidden; }
#freeman-page .slide img{ width:100%; height:100%; object-fit:cover; }

/* NAV-PFEILE (Desktop/Tablet) */
#freeman-page .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:60px; height:60px; border-radius:50%;
  background:rgba(0,0,0,.45); border:2px solid #fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
#freeman-page .nav:hover{ background:rgba(0,0,0,.65); }
#freeman-page .nav::after{
  content:""; display:block; width:18px; height:18px;
  border-right:3px solid #fff; border-top:3px solid #fff;
}
#freeman-page #galNext::after{ transform:rotate(45deg); }
#freeman-page #galPrev::after{ transform:rotate(-135deg); }
#freeman-page #galPrev{ left:calc(var(--side) + 10px); }
#freeman-page #galNext{ right:calc(var(--side) + 10px); }

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

  /* Hero-Bild als Background der Section, Text im Flow */
  #freeman-page .hero{
    background-image:url('https://designbymichelle.de/wp-content/uploads/2025/09/FREEMAN_Hero_01_Mobil-scaled.webp');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    min-height:560px;
  }
  #freeman-page .hero-bg{ display:none !important; }

  #freeman-page .hero-inner{
    position:static;
    max-width:none;
    padding:24px var(--side-m) 32px;
    display:flex;
    flex-direction:column;
  }

  #freeman-page .close-btn{
    align-self:flex-end;
    height:48px;
    padding:0 22px;
    backdrop-filter:saturate(140%) blur(6px);
    -webkit-backdrop-filter:saturate(140%) blur(6px);
  }
  #freeman-page .pill-text{ line-height:1; }

  #freeman-page .hero-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  #freeman-page .project-name,
  #freeman-page .project-short,
  #freeman-page .meta-inline,
  #freeman-page .hero-copy,
  #freeman-page .copy{ text-align:left; }

  /* --- Collapsible States (fix) --- */
  #freeman-page .copy-collapsible{
    transition:max-height .28s ease;
  }
  #freeman-page .copy-collapsible[data-collapsed="true"]{
    max-height:6.2em;
    overflow:hidden;
    position:relative;
  }
  #freeman-page .copy-collapsible[data-collapsed="true"]::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:3em;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
  }
  #freeman-page .copy-collapsible[data-collapsed="false"]{
    max-height:9999px; /* explizit: offen */
  }
  #freeman-page .more-btn{ display:inline-flex; margin-top:16px; }

  /* ===== SLIDER (Mobil) ===== */
  #freeman-page .gallery{ background:#000; padding:16px 0 0 0; }
  #freeman-page .gallery-viewport{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  #freeman-page .gallery-viewport::-webkit-scrollbar{ display:none; }
  #freeman-page .gallery-track{ gap:0 !important; transform:none !important; }
  #freeman-page .slide{
    flex:0 0 100vw !important;
    width:100vw !important;
    height:auto !important;
    scroll-snap-align:start;
    background:#111;
  }
  #freeman-page .slide img{ width:100% !important; height:auto !important; display:block; }
  #freeman-page .nav{ display:none !important; }
}

/* ===== MORE TO EXPLORE ===== */
#freeman-page .more-grid-section{
  position:relative; left:50%; transform:translateX(-50%);
  width:100vw; background:#242424; padding:80px 0 120px 0;
}
#freeman-page .more-head{ text-align:center; color:#fff; font-style:italic; font-size:32px; margin:0 0 60px 0; }
#freeman-page .grid-container{ max-width:1920px; margin:0 auto; padding:0 var(--side); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; grid-row-gap:60px; }
#freeman-page .grid-item{ position:relative; overflow:hidden; min-height:300px; }
#freeman-page .grid-media{ position:relative; width:529px; height:480px; margin:0 auto; overflow:hidden; display:block; }
#freeman-page .grid-media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
#freeman-page .grid-media:hover img{ transform:scale(1.02); }
#freeman-page .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s ease; display:flex; justify-content:center; align-items:center; }
#freeman-page .grid-media:hover .overlay{ opacity:1; }
#freeman-page .explore-button{ display:inline-block; padding:8px 16px; border:1px solid #fff; color:#fff; font-family:"Swear Display",serif; font-size:22px; border-radius:36px; text-decoration:none; }
#freeman-page .grid-info{ width:529px; margin:16px auto 0; display:flex; justify-content:space-between; align-items:center; }
#freeman-page .grid-info .grid-name, #freeman-page .grid-info .grid-desc{ color:#cfcfcf; }
#freeman-page .grid-item.is-coming-soon .grid-desc{ display:none !important; }
#freeman-page .grid-item.placeholder .grid-info{ display:none !important; }
#freeman-page .grid-item.placeholder .placeholder-box{ background:#1a1a1a; }

@media (min-width:769px) and (max-width:1919px){
  #freeman-page .grid-media{ max-width:529px; width:100%; margin:0 auto; }
  #freeman-page .grid-info{ max-width:529px; width:100%; margin:25px auto 0; }
  #freeman-page .grid-info .grid-desc{ font-size:17px; overflow-wrap:break-word; hyphens:auto; }
}
@media (max-width:768px){
  #freeman-page .more-grid-section{ padding:60px 0 80px; }
  #freeman-page .grid-container{ grid-template-columns:1fr; padding:0 var(--side-m); gap:0; row-gap:20px; }
  #freeman-page .grid-media{ width:100%; height:auto; }
  #freeman-page .grid-info{ width:auto; margin:16px 16px 0; display:block; }
  #freeman-page .overlay{ display:none !important; }
}