/* BuddySocial v10.97 - Hyves photo albums + krabbels retro polish */
:root{--bs-hyves-blue:#1282B4;--bs-hyves-soft:#F2F9FC;--bs-hyves-border:#ccc;}

/* FOTO-ALBUMS / OVERZICHT */
.hyves-album-grid,
.hyves-photo-thumb-grid,
.hyves-classic-photo-grid,
.tagged-photo-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:start;
}
.hyves-album-card,
.hyves-photo-thumb-wrap,
.hyves-classic-photo,
.tagged-photo-card{
  min-width:0;
}
.hyves-album-cover,
.hyves-photo-thumb,
.hyves-classic-photo>a:first-child,
.tagged-photo-cover{
  display:block;
  background:#fff !important;
  border:1px solid var(--bs-hyves-border) !important;
  padding:5px !important;
  box-sizing:border-box;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 3px 7px rgba(0,0,0,.08) !important;
  overflow:hidden;
}
.hyves-album-cover,
.hyves-photo-thumb,
.hyves-classic-photo>a:first-child,
.tagged-photo-cover{aspect-ratio:1/1;}
.hyves-album-cover img,
.hyves-photo-thumb img,
.hyves-classic-photo>a:first-child img,
.tagged-photo-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
.hyves-photo-thumb>span,
.hyves-photo-caption-link,
.tagged-photo-meta>a:first-child,
.hyves-album-copy>a:first-child{
  color:var(--bs-hyves-blue) !important;
  font-size:11px !important;
  line-height:1.35;
  text-decoration:none !important;
  font-weight:700;
}
.hyves-photo-caption-link{display:block;margin-top:5px;}
.hyves-photo-caption-link:hover,
.tagged-photo-meta>a:first-child:hover,
.hyves-album-copy>a:first-child:hover{text-decoration:underline !important;}
.hyves-classic-photo>div small,
.tagged-photo-meta small,
.hyves-album-copy small{font-size:10px;color:#777;}

/* LOSSE FOTO: foto links, mini-krabbelbox/reacties rechts */
.hyves-photo-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:14px;
  align-items:start;
}
.hyves-photo-detail>.hyves-album-top{grid-column:1/-1;}
.hyves-photo-detail>.retro-box:not(.gap){grid-column:1;grid-row:2;min-width:0;}
.hyves-photo-detail>.photo-tags-block{grid-column:1;grid-row:3;min-width:0;}
.hyves-photo-detail>.retro-box.gap:not(.photo-tags-block){grid-column:2;grid-row:2/span 2;min-width:0;position:sticky;top:12px;}
.hyves-photo-focus>img{
  max-width:100% !important;
  height:auto !important;
  background:#fff;
  border:1px solid #ccc;
  padding:6px;
  box-sizing:border-box;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.08);
}
.hyves-photo-detail .classic-comments{display:flex;flex-direction:column;gap:0;}
.hyves-photo-detail .classic-comment{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr);
  gap:8px;
  padding:9px 0 !important;
  border-bottom:1px dotted #9fc9da;
}
.hyves-photo-detail .classic-comment img{
  width:40px !important;height:40px !important;object-fit:cover;
  box-sizing:border-box;background:#fff;border:1px solid #ccc;padding:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.hyves-photo-detail .retro-form textarea{border:1px solid #d5b84b !important;background:#fffef4;}

/* KRABBELBOX - oude Hyves lijststijl */
.hyves-scrap-board .scrap-thread{border-top:1px dotted #9ec8d9;}
.hyves-scrap-board .scrap-thread:nth-child(even){background:var(--bs-hyves-soft);}
.hyves-scrap-board .scrap{
  display:grid !important;
  grid-template-columns:62px minmax(0,1fr) !important;
  gap:10px !important;
  padding:12px !important;
  align-items:start !important;
}
.hyves-scrap-board .scrap>.small-avatar,
.hyves-scrap-board .scrap>a>.small-avatar,
.hyves-scrap-board .scrap img.small-avatar{
  width:50px !important;height:50px !important;object-fit:cover !important;
  box-sizing:border-box !important;padding:3px !important;background:#fff !important;
  border:1px solid #ccc !important;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 2px 5px rgba(0,0,0,.08) !important;
}
.hyves-scrap-board .scrap-content{min-width:0;}
.hyves-scrap-board .scrap-content>div:first-child a{
  color:var(--bs-hyves-blue) !important;font-weight:700;text-decoration:none;
}
.hyves-scrap-board .scrap-date{color:#888 !important;font-size:10px !important;margin-left:5px;}
.hyves-scrap-board .scrap-content p{margin:5px 0 7px;line-height:1.45;overflow-wrap:anywhere;}
.hyves-scrap-board .scrap-actions{
  display:flex !important;gap:8px;align-items:center;flex-wrap:wrap;
  padding-top:5px;margin-top:7px;border-top:1px dotted #d4e6ee;
}
.hyves-scrap-board .scrap-actions button,
.hyves-scrap-board .scrap-reply-toggle,
.hyves-scrap-board .scrap-delete-btn{
  appearance:none !important;border:0 !important;background:transparent !important;
  padding:0 !important;margin:0 !important;color:var(--bs-hyves-blue) !important;
  font:normal 10px/1.4 Arial,sans-serif !important;cursor:pointer !important;
  box-shadow:none !important;text-decoration:none !important;
}
.hyves-scrap-board .scrap-actions button:hover{text-decoration:underline !important;}
.hyves-scrap-board .scrap-delete-form{display:inline-flex;margin:0;}
.hyves-scrap-board .scrap-media{max-width:min(100%,520px);height:auto;}
.hyves-scrap-board .buddy-youtube-embed,
.hyves-scrap-board .buddy-youtube-live-preview{max-width:560px;width:100%;}
.hyves-scrap-board .scrap-replies{margin:0 12px 10px 74px;border-left:2px solid #d8edf6;padding-left:10px;}
.hyves-scrap-board .scrap-reply{border-top:1px dotted #c8dde7;padding:8px 0;}

/* Tablet: 3 kolommen */
@media (max-width:950px){
  .hyves-album-grid,.hyves-photo-thumb-grid,.hyves-classic-photo-grid,.tagged-photo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .hyves-photo-detail{grid-template-columns:minmax(0,1fr) 270px;}
}

/* Mobiel: 2 kolommen + reacties onder foto */
@media (max-width:700px){
  .hyves-album-grid,.hyves-photo-thumb-grid,.hyves-classic-photo-grid,.tagged-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .hyves-photo-detail{display:block !important;}
  .hyves-photo-detail>.retro-box,
  .hyves-photo-detail>.photo-tags-block{margin-top:10px;position:static !important;}
  .hyves-scrap-board .scrap{grid-template-columns:50px minmax(0,1fr) !important;gap:8px !important;padding:10px !important;}
  .hyves-scrap-board .scrap>.small-avatar,
  .hyves-scrap-board .scrap img.small-avatar{width:42px !important;height:42px !important;}
  .hyves-scrap-board .scrap-replies{margin-left:58px;}
}

/* Zeer smal: avatar boven tekst, nooit een dun tekstkolommetje */
@media (max-width:440px){
  .hyves-scrap-board .scrap{display:block !important;}
  .hyves-scrap-board .scrap>.small-avatar,
  .hyves-scrap-board .scrap img.small-avatar{width:50px !important;height:50px !important;margin-bottom:7px;}
  .hyves-scrap-board .scrap-content>div:first-child{display:block;}
  .hyves-scrap-board .scrap-date{display:block;margin:2px 0 0 !important;}
  .hyves-scrap-board .scrap-replies{margin-left:12px;}
}