/* =========================================================
   Trollhunter Child – Äther
   YouTube Grid + Featured Player + Underpost-Modul + Archiv
   ========================================================= */


/* =========================================================
   ÄTHER – YOUTUBE GRID (GRUNDLAGE)
   ========================================================= */

.youtube_channel.aether_grid{
  display:flex;
  flex-wrap:wrap;
  margin-left:-12px;
  margin-right:-12px;
  margin-top:0;
}

.youtube_channel.aether_grid .ytc_video_container{
  box-sizing:border-box;
  padding:12px;
  flex:0 0 33.333%;
  max-width:33.333%;
  display:flex;
  flex-direction:column;
  transition: transform .12s ease, opacity .12s ease;
}

.youtube_channel.aether_grid .ytc_video_container a{
  text-decoration:none;
}


/* =========================================================
   ÄTHER – GRID TITEL (DESKTOP = STABIL, MOBILE = KOMPAKT)
   ========================================================= */

/* Grundstil – exakt wie Theme-H3 */
.youtube_channel.aether_grid .ytc_title{
  order:1;
  margin: 0 0 1.2rem 0;

  font-family: var(--gp-font--public-sans, "Public Sans", system-ui, sans-serif);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;

  font-size: clamp(1.188rem, 0.694vw + 0.854rem, 1.35rem);
  line-height: calc(5px + 2ex);
  letter-spacing: normal;
  opacity: 1;
}

/* Desktop: gleiche Kachelhöhe durch feste Titelzone */
@media (min-width: 641px){
  .youtube_channel.aether_grid .ytc_title{
    min-height: calc(4 * (5px + 2ex)); /* Platz für bis zu 4 Zeilen */
  }
}

/* Desktop: Grid-Titel minimal kleiner als echtes H3 */
@media (min-width: 1024px){
  .youtube_channel.aether_grid .ytc_title{
    font-size: clamp(1.05rem, 0.55vw + 0.8rem, 1.18rem);
  }
}


/* =========================================================
   ÄTHER – THUMBNAILS (DOKUMENTARISCH)
   ========================================================= */

.youtube_channel.aether_grid .ytc_thumb{
  order:2;
  overflow:hidden;
}

.youtube_channel.aether_grid .ytc_thumb img{
  width:100%;
  height:auto;
  display:block;
  transform: scale(1.08);
}

/* Klickbarer Thumb: visuell zurückgenommen */
/*
.youtube_channel.aether_grid a.ytc_thumb{
  filter: grayscale(100%) contrast(.95) brightness(.9) !important;
  border: 1px solid rgba(212,199,151,.25);
}
*/


/* =========================================================
   DESKTOP / TABLET FEINSCHLIFF
   ========================================================= */

/* Erstes Grid-Item ausblenden (Featured zeigt es bereits) */
.youtube_channel.aether_grid .ytc_video_container:first-child{
  display:none !important;
}

/* engeres Spacing auf kleineren Screens */
@media (max-width: 1024px){
  .youtube_channel.aether_grid{
    margin-left:-8px;
    margin-right:-8px;
  }
  .youtube_channel.aether_grid .ytc_video_container{
    padding:8px;
  }
}


/* =========================================================
   MOBILE – VERTIKAL, DICHT, KLAR
   ========================================================= */

@media (max-width: 640px){

  /* Featured-Player komplett ausblenden */
  .th-aether-player{
    display:none !important;
  }

  /* Grid 1-spaltig */
  .youtube_channel.aether_grid{
    margin-left:0;
    margin-right:0;
  }

  .youtube_channel.aether_grid .ytc_video_container{
    padding:0 0 50px 0; /* vertikale Ruhe zwischen Einträgen */
    flex-basis:100%;
    max-width:100%;
    text-align:center;
    align-items:center;
  }

  /* Erstes Video wieder sichtbar, da Player weg */
  .youtube_channel.aether_grid .ytc_video_container:first-child{
    display:flex !important;
  }

  /* Bei num="4": viertes Item ausblenden */
  .youtube_channel.aether_grid .ytc_video_container:nth-child(4){
    display:none !important;
  }

  /* Mobile-Titel: direkt am Bild, max. 2 Zeilen */
  .youtube_channel.aether_grid .ytc_title{
    margin: 0 0 25px 0;
    font-size: 26px;
    line-height: 1.25;
    text-align: left;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-height: 0;
  }
}


/* =========================================================
   FEATURED PLAYER – VISUELL ZURÜCKGENOMMEN
   ========================================================= */

.youtube_channel iframe{
  display:block;
}

.th-aether-player iframe{
  opacity: .82;
  transition: opacity .15s ease;
}

.th-aether-player iframe:hover{
  opacity: 1;
}


/* =========================================================
   ÄTHER – MODUL UNTER ARTIKELN (ACF)
   ========================================================= */

.th-aether-underpost{
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

.th-aether-label{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 10px;
}


/* =========================================================
   ÄTHER – ARCHIV-LISTE (LOG / REGISTER)
   ========================================================= */

.aether-archive{
  list-style:none;
  margin:0;
  padding:0;
}

.aether-archive li{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:16px;
  padding:8px 0;
  border-bottom:1px solid rgba(212,199,151,.12);
}

.aether-archive .aether-date{
  font-size:11px;
  opacity:.55;
  letter-spacing:.06em;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

.aether-archive a{
  font-size:15px;
  line-height:1.35;
  font-weight:400;
  text-decoration:none;
  color:inherit;
}

.aether-archive a:hover{
  text-decoration:underline;
}

/* Optional: gezielt etwas „hochziehen“, wenn es immer noch zu tief wirkt */
.page-id-53638 .inside-article{
  transform: translateY(-24px);
}