/* ==== A365 FEED (categorie/tag/zoeken) ===================================== */
/* Markup: .feed-row > a.feed-item > (.feed-txt + figure.thumb) */

.feed-page{ --feed-col-max: 800px; --feed-gap:16px; }
.feed-band{ grid-column: 1 / -1; }

/* Linkerkolom limiter */
.feed-page .section.section--left{
  width:100%;
  max-width: var(--feed-col-max, 800px);
  justify-self:start;
}

/* Lijst + scheidslijn (“underline”) tussen items */
.feed-list{ list-style:none; margin:0; padding:0; }
.feed-row{ margin:0; padding:12px 0; }
.feed-row:first-child{ border-top:1px solid var(--border); }
.feed-row + .feed-row{ border-top:1px solid var(--border); }
.feed-row:last-child{ border-bottom:1px solid var(--border); } /* extra lijn onderaan */

/* Reset anchor-underline op container (we sturen underline alleen naar .title) */
.feed-item,
.feed-item:hover{ text-decoration:none !important; }

/* ====================== DESKTOP =========================================== */
@media (min-width:768px){
  .feed-item{
    display:grid;
    grid-template-columns: 1fr var(--feed-thumb-desk, 160px); /* tekst | image (kleiner) */
    align-items:start;                /* headline top = image top */
    gap: var(--feed-gap,16px);
  }

  /* Tekst links */
  .feed-txt{ order:1; min-width:0; }

  .feed-item .title{
    margin:0 0 4px 0;
    font-weight:700;
    line-height:1.18;
    font-size: clamp(1.20rem, .96rem + .30vw, 1.20rem);
    text-decoration:none;
  }

  /* === Feed hover-kleuren identiek aan home ===============================
     - light + auto(light): brand
     - dark  + auto(dark) : muted/grijs
  ======================================================================== */
  html:not([data-theme]),
  html[data-theme="light"],
  html[data-theme="auto"]{
    --feed-title-hover: var(--brand);
  }
  @media (prefers-color-scheme: dark){
    html[data-theme="auto"]{
      --feed-title-hover: var(--muted);
    }
  }
  html[data-theme="dark"]{
    --feed-title-hover: var(--muted);
  }

  /* Alleen titel reageert op hover (zoals op home) */
  .feed-item{ text-decoration: none; }
  .feed-item .title{
    text-decoration: none;
    transition: color .18s ease, text-decoration-color .18s ease;
  }
  @media (hover:hover){
    .feed-item:hover .title{
      color: var(--feed-title-hover);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: currentColor;
    }
    .feed-item:hover .meta,
    .feed-item:hover .teaser{
      color: inherit;
      text-decoration: none;
    }
  }

  /* Tijd + teaser nooit underline */
  .feed-item .meta,
  .feed-item .intro,
  .feed-item .teaser{
    text-decoration:none !important;
  }

  .feed-item .meta.hero-meta{
    margin:8px 0 4px 0;
    color:var(--muted);
    font-size:.89rem; line-height:1.3;
  }
  .feed-item .intro,
  .feed-item .teaser{
    margin:0;
    color:var(--text);
    font-size:.98rem; line-height:1.45;
  }

  /* Thumbnail rechts flush, 4:3, hover-zoom */
  .feed-item .thumb{
    order:2; margin:0; border-radius:var(--radius);
    overflow:hidden; aspect-ratio:4 / 3;
    background:color-mix(in srgb,var(--bg) 90%, #000);
  }
  .feed-item .thumb img{
    width:100%; height:100%;
    display:block; object-fit:cover;
    transform:scale(1); transition:transform .28s ease;
  }
  @media (hover:hover){
    .feed-item:hover .thumb img{ transform:scale(1.06); }
  }

  /* Teasers uit via instelling (zoals home) */
  html[data-teasers="off"] .feed-item .intro,
  html[data-teasers="off"] .feed-item .teaser{ display:none !important; }

  .feed-row{ padding:10px 0; } /* compacter */
}

/* ====================== MOBIEL ============================================ */
/* Halve thumbnail-grootte, rechts flush, 4:3, zoom bij hover/tap, geen teaser */
@media (max-width:767.98px){
  :root{ --feed-thumb-mob: min(28%, 140px); }

  .feed-item{
    display:grid;
    grid-template-columns: 1fr var(--feed-thumb-mob);
    align-items:start;
    gap:12px;
    text-decoration:none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .feed-txt{ order:1; min-width:0; }

  .feed-item .title{
    margin:0 0 2px 0;
    font-weight:500;
    line-height:1.25;
    padding-right:2.5px;
    font-size: clamp(0.92rem, .98rem + .20vw, 0.92rem);
    text-decoration:none;
  }
  .feed-item:hover .title{
    text-decoration:underline;
    text-underline-offset:4px;
    text-decoration-thickness:1px;
  }

  .feed-item .meta.hero-meta{
    margin:2px 0 0 0; color:var(--muted);
    font-size:.80rem; line-height:1.5;
    text-decoration:none !important;
  }

  .feed-item .intro,
  .feed-item .teaser{ display:none !important; }

  .feed-item .thumb{
    order:2; margin:0; border-radius:var(--radius);
    overflow:hidden; aspect-ratio:4 / 3;
    background:color-mix(in srgb,var(--bg) 90%, #000);
  }
  .feed-item .thumb img{
    width:100%; height:100%;
    display:block; object-fit:cover;
    transform:scale(1); transition:transform .28s ease;
  }
  .feed-item:is(:hover,:active) .thumb img{ transform:scale(1.06); }

  .feed-row{ padding:10px 0; }
}

/* ==== FEED-TITLE (h1 boven de lijst) – makkelijk te tweaken via vars ==== */
.feed-page{
  --feed-title-size: clamp(1.00rem, 0.9rem + 1.4vw, 1.80rem);
  --feed-title-weight: 800;
  --feed-title-gap: 32px;
  --feed-title-color: var(--muted);
}

.feed-title{
  margin: calc(var(--feed-title-gap) / 1.35) 0 var(--feed-title-gap);
  font-size: var(--feed-title-size);
  font-weight: var(--feed-title-weight);
  line-height: 1.2;
  color: var(--feed-title-color);
  text-wrap: balance;
}

/* Accent in titel: light/auto(light) = brand; dark/auto(dark) = text */
.feed-title span{ color: var(--brand); }
html:not([data-theme]) .feed-title span{ color: var(--brand); }
html[data-theme="light"] .feed-title span{ color: var(--brand); }
html[data-theme="dark"]  .feed-title span{ color: var(--text) !important; }
html[data-theme="auto"]  .feed-title span{ color: var(--brand); }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .feed-title span{ color: var(--text) !important; }
}

@media (max-width:767.98px){
  .feed-title{
    margin: calc(var(--feed-title-gap) - 16px) 0 var(--feed-title-gap);
    font-size: var(--feed-title-size);
    font-weight: var(--feed-title-weight);
    line-height: 1.2;
    color: var(--feed-title-color);
    text-wrap: balance;
  }
}

/* .feed-title{ border-bottom:1px solid var(--border); padding-bottom:10px; } */

.pull-up { margin-top:-32px; }

/* ====================== ZOEKFORMULIER ===================================== */
/* ==== FEED: zoekbalk =================================================== */
/* Vormt één geheel: input links, knop rechts; outer corners rond; geen naad */

.feed-search{
  display:flex;
  align-items:stretch;
  gap:0;                          /* geen gat tussen input en knop */
  width:100%;
  max-width: var(--feed-col-max, 800px);
  margin: -12px 0 32px;
}

.feed-search .search-field{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.feed-search:hover{
  border-color: color-mix(in srgb, var(--brand), #fff 25%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand), transparent 82%);
}

/* Input: outer left corners rond; rechterrand = 0 zodat naad verdwijnt */
.feed-search input[type="search"]{
  width:100%;
  height:42px;
  padding:0 40px 0 12px;          /* ruimte rechts voor clear-button */
  border:1px solid var(--border);
  border-right:0;                 /* naadloos tegen knop */
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg);
  color: var(--text);
  outline:none;
}

/* Verberg native WebKit clear zodat onze clear-btn overal consistent is */
.feed-search input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
}

/* Clear (×) binnen het veld; verschijnt alleen als er tekst staat */
.feed-search .clear-btn{
  position:absolute;
  top:50%;
  right:8px;
  transform: translateY(-50%);
  width:28px; height:28px;
  border:0; border-radius:50%;
  background: transparent;
  color: var(--muted);font-weight:800;
  line-height:26px;
  text-align:center;
  cursor:pointer;
}
@media (hover:hover){
  .feed-search .clear-btn:hover{
    background: color-mix(in srgb, var(--bg), #000 6%);
  }
}
.feed-search .clear-btn:active{
  background: color-mix(in srgb, var(--bg), #000 10%);
}

/* Knop: outer right corners rond; flush tegen input; geen “jump” bij active */
:root{
  --search-btn-bg: var(--brand);
  --search-btn-bg-active: color-mix(in srgb, var(--brand), #000 12%);
  --search-btn-fg: #fff;
}
html[data-theme="dark"]{
  --search-btn-bg: color-mix(in srgb, var(--bg), #fff 7%);
  --search-btn-bg-active: color-mix(in srgb, var(--bg), #fff 14%);
  --search-btn-fg: var(--text);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --search-btn-bg: color-mix(in srgb, var(--bg), #fff 7%);
    --search-btn-bg-active: color-mix(in srgb, var(--bg), #fff 14%);
    --search-btn-fg: var(--text);
  }
}

.feed-search .btn-search{
  height:42px;
  padding:0 14px;
  border:1px solid var(--border);
  border-left:0;                            /* naadloos tegen input */
  border-radius: 0 var(--radius) var(--radius) 0; /* outer right rond */
  background: var(--search-btn-bg);
  color: var(--search-btn-fg);
  font: inherit;
  font-weight:600;
  cursor:pointer;
  /* geen “bewegen” bij click */
  transform: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .feed-search .btn-search:hover{
    background: var(--search-btn-bg-active);
  }
}
.feed-search .btn-search:active{
  background: var(--search-btn-bg-active);
}

/* Mobiel: knop weg; invullen + enterkeyhint=search doet de rest */
@media (max-width:767.98px){
  .feed-search .btn-search{ display:none; }
  .feed-search input[type="search"]{
    border-right:1px solid var(--border);
    border-radius: var(--radius);           /* alleen veld, netjes rond */
  }
}

.feed-search:focus-within{
  border-color: color-mix(in srgb, var(--brand), #fff 25%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand), transparent 82%);
}
/* autheur */
.rail--author .rail-author-card{
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: var(--bg-elevated, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  margin-bottom: 16px;
  margin-top:32px;

  /* rail-kaart begrenzen */
  max-width: 300px;
  margin-inline: auto;
}

/* Hero-gedeelte bovenin met vaste "tile" van max 336x336 */
.author-hero{
  position: relative;
  height: 300px;          /* vaste hoogte */
  max-height: 336px;
  max-width: 336px;width:300px;
  margin: 0 auto;

  padding: 16px;             /* wat ruimte voor tekst onderin */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* tekst onderin */
  color: #fff;
  background: #000;          /* fallback als er geen foto is */
  overflow: hidden;
}

/* Achtergrondafbeelding: 300x300, volledig en gecentreerd */
.author-hero.has-bg{
  background-size: 300px 300px;  /* volledige afbeelding zichtbaar */
  background-position: center center;
  background-repeat: no-repeat;
}

/* Donkere overlay onderaan voor leesbare tekst */
.author-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0))!important;
  z-index: 0;
}

.author-hero-inner{
  position: relative;
  z-index: 1;              /* boven overlay */
}

/* Label, naam, rol – tekst onderin over de foto */
.author-label{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 4px;
  opacity: .9;
}

.author-name{
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.author-role{
  margin: 4px 0 0;
  font-size: .9rem;
  opacity: .95;
}

.author-body{
  padding: 12px 16px 16px;
  background: var(--bg);
}

.author-bio-title{
  font-size: .9rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.author-bio-text{
  font-size: .9rem;
  line-height: 1.4;
  margin-bottom: 12px;
}

.author-contact-title{
  font-size: .9rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.author-email a{
  font-size: .9rem;
  word-break: break-all;
}

.author-socials{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.author-socials__item a{
  font-size: .8rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid var(--border, #ddd);
}