/* ══════════════════════════════════════════════════════════
   SOCIAL — Instagram post grid + IG account cards
   index.html specific (can be shared if other pages need it)
══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────── */
.social-section {
  max-width:90rem; margin:0 auto;
  padding:2rem 1.25rem 3rem;
  width:100%;
}
@media (min-width:56.01rem) {
  .social-section { padding:0 2rem 4.5rem; }
}

/* ─────────────────────────────────────
   CHANNEL TABS
───────────────────────────────────── */
.social-tabs {
  display:flex; align-items:center; gap:0;
  border-bottom:1px solid var(--border); margin-bottom:2rem;
}
.social-tab {
  padding:.875rem 1.375rem;
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border-bottom:2px solid transparent;
  transition:color .15s; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:.4rem;
}
.social-tab:hover { color:var(--white); }
.social-tab.active { color:var(--white); border-bottom-color:var(--red); }
.social-tab-dot { width:.5rem; height:.5rem; flex-shrink:0; }
.dot-main    { background:var(--red); }
.dot-jungen  { background:var(--red); }
.dot-maedchen { background:var(--red); }

/* ─────────────────────────────────────
   EMPTY STATE
───────────────────────────────────── */
.social-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 4rem 2rem;
  text-align: center;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
}
.social-empty-icon {
  color: var(--gray-400);
  line-height: 0;
}
.social-empty-title {
  font-family: 'Teko', sans-serif;
  font-size: 1.375rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray-400);
  margin: 0;
}
.social-empty-body {
  font-size: 1.2rem;
  color: var(--gray-300);
  line-height: 1.7;
  margin: 0;
}

/* ─────────────────────────────────────
   POST GRID (2-col mobile, 4-col desktop)
───────────────────────────────────── */
.social-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.75rem; width:100%; box-sizing:border-box;
}
@media (min-width:56.01rem) {
  .social-grid { grid-template-columns:repeat(4,1fr); gap:1.2rem; }
}

/* ─────────────────────────────────────
   INDIVIDUAL POST CARD
───────────────────────────────────── */
.social-post {
  aspect-ratio:4/5;
  position:relative; overflow:hidden; cursor:pointer;
  background:var(--off-black);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem;
}

/* Background image layer with subtle scale-on-hover */
.social-post-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--dark-red-bg),var(--off-black));
  transition:transform .3s;
  z-index:0;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.social-post:hover .social-post-bg { transform:scale(1.03) translateZ(0); }

/* Gradient scrim at bottom */
.social-post::after {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top, rgba(var(--rgb-black),.95) 0%, rgba(var(--rgb-black),.3) 50%, transparent 100%);
  pointer-events:none;
}

/* Category badge (legacy, replaced by channel badge) */
.social-post-cat {
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; padding:.2rem .5rem;
  background:var(--red); color:var(--white);
}

/* Channel badge (unified, replaces social-post-cat) */
.social-channel-badge {
  position:absolute; top:.75rem; left:.75rem; z-index:3;
  display:inline-flex; align-items:center; gap:.375rem;
  font-size: 1.2rem; font-weight:700; letter-spacing:.04em;
  padding:.25rem .625rem .25rem .5rem;
  background:rgba(var(--rgb-black),.65); color:var(--white);
  border:1px solid var(--gray-400);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.social-channel-badge svg { stroke:var(--white); fill:none; }

/* Caption + meta */
.social-post-caption {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; line-height:1.2;
  position:relative; z-index:3;
  color:var(--white) !important;
}
.social-post-meta {
  font-size: 1.2rem; color:var(--gray-200) !important;
  margin-top:.3rem; position:relative; z-index:3;
}

/* ─────────────────────────────────────
   CONSENT GATE
───────────────────────────────────── */
.sf-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3.5rem 2rem;
  text-align: center;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  background: var(--surface);
  margin-bottom: 2rem;

  .btn-primary {
    width: 20%;
  }
}

.sf-consent-icon {
  color: var(--gray-400);
  line-height: 0;
  /* Instagram-style gradient ring */
  padding: .875rem;
  border-radius: 50%;
  background: var(--ig-icon-gradient);
}
.sf-consent-icon svg {
  stroke: var(--white);
}

.sf-consent-body {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.sf-consent-title {
  font-family: 'Teko', sans-serif;
  font-size: 1.375rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  margin: 0;
}

.sf-consent-text {
  font-size: 1.2rem;
  color: var(--gray-200);
  line-height: 1.65;
  margin: 0;
}

.sf-consent-link {
  color: var(--gray-100);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.sf-consent-link:hover { color: var(--white); }

@media (max-width: 40rem) {
  .sf-consent { padding: 2.5rem 1.25rem; }
}

/* ─────────────────────────────────────
   FEED GRID — 5 portrait cards
───────────────────────────────────── */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
  margin-bottom: 2rem;
}

.sf-post {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  background: var(--surface);
  /* gradient scrim */
}
.sf-post::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--rgb-pure-black), .45) 0%,
    transparent 35%,
    transparent 45%,
    rgba(var(--rgb-pure-black), .9) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity .25s;
}
.sf-post:hover::after {
  opacity: .8;
}

/* Background image */
.sf-post-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sf-post-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease;
}
.sf-post:hover .sf-post-bg img {
  transform: scale(1.05);
}

/* Top row: owner badge left, type badges right */
.sf-post-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: .625rem .625rem 0;
}

.sf-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
  background: rgba(var(--rgb-pure-black), .55);
  border: 1px solid rgba(var(--rgb-white), .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: .2rem .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.sf-post-badges {
  display: flex;
  gap: .25rem;
}

.sf-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
  background: rgba(var(--rgb-pure-black), .55);
  border: 1px solid rgba(var(--rgb-white), .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Bottom: caption + date */
.sf-post-bottom {
  position: relative;
  z-index: 2;
  padding: 0 .75rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: left;
}

.sf-post-caption {
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-post-date {
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  margin-top: .5rem;
  color: var(--gray-300);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: right;
}

/* Responsive */
@media (max-width: 72rem) {
  .sf-grid { grid-template-columns: repeat(3, 1fr); }
  .sf-grid .sf-post:nth-child(n+4) { display: none; }
}
@media (max-width: 48rem) {
  .sf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }
  .sf-grid .sf-post:nth-child(n+3) { display: none; }
}

/* ─────────────────────────────────────
   INSTAGRAM ACCOUNT CARDS
───────────────────────────────────── */
.ig-accounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

.ig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.375rem 1.25rem 1.125rem;
  background: rgba(var(--rgb-white),.04);
  border: 1px solid rgba(var(--rgb-white),.07);
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s ease, background .22s, border-color .22s;
}
/* Instagram gradient top bar */
.ig-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ig-gradient);
}
.ig-card:hover {
  transform: translateY(-4px);
  background: rgba(var(--rgb-white),.07);
  border-color: var(--subtle);
}

.ig-card-icon {
  width: 2.625rem; height: 2.625rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--ig-icon-gradient);
  border-radius: .625rem;
}

.ig-card-handle {
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .01em;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ig-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.ig-card-label {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gray-300);
}

.ig-card-arrow {
  color: var(--gray-400);
  flex-shrink: 0;
  transition: color .18s, transform .18s;
}
.ig-card:hover .ig-card-arrow {
  color: var(--gray-100);
  transform: translateX(3px);
}

@media (max-width: 56rem) {
  .ig-accounts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 30rem) {
  .ig-accounts { grid-template-columns: 1fr 1fr; gap: .625rem; }
}

/* ─────────────────────────────────────
   SOCIAL MODAL
───────────────────────────────────── */
.sf-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.sf-modal[hidden] { display: none; }

.sf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
}
.sf-modal.open .sf-modal-backdrop { opacity: 1; }

.sf-modal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  max-height: calc(100dvh - 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.sf-modal.open .sf-modal-shell {
  transform: none;
  opacity: 1;
}

/* Header bar */
.sf-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .75rem 1.2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sf-modal-owner {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--white);
}
.sf-modal-owner svg { color: var(--gray-300); flex-shrink: 0; }

.sf-modal-hdr-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.sf-modal-ig-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s;
}
.sf-modal-ig-btn:hover { color: var(--white); border-color: var(--subtle); }

.sf-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.sf-modal-close:hover { color: var(--white); border-color: var(--subtle); }

/* Media area */
.sf-modal-media {
  position: relative;
  background: #000;
  flex-shrink: 0;
  max-height: 65dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sf-modal-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 45dvh;
  object-fit: contain;
}

.sf-modal-video {
  display: block;
  width: 100%;
  max-height: 45dvh;
  object-fit: contain;
  background: #000;
}

/* Carousel */
.sf-carousel-track {
  width: 100%;
  position: relative;
}

.sf-carousel-slide {
  display: none;
}
.sf-carousel-slide.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-carousel-slide img {
  display: block;
  width: 100%;
  max-height: 45dvh;
  object-fit: contain;
}

.sf-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s;
}
.sf-carousel-btn:hover { background: rgba(0,0,0,.8); }
.sf-carousel-prev { left: .75rem; }
.sf-carousel-next { right: .75rem; }

/* Dots */
.sf-modal-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .625rem 1.2rem;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.sf-modal-dots[hidden] { display: none; }

.sf-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.sf-dot.active {
  background: var(--red);
  transform: scale(1.25);
}

/* Footer */
.sf-modal-footer {
  padding: .875rem 1.125rem 1.2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  overflow-y: auto;
  flex: 0 1 auto;
  min-height: 0;
}

.sf-modal-body {
  font-family: 'Teko', sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--gray-100);
  line-height: 1.65;
  margin: 0;
  white-space: pre-line;
}

.sf-modal-date {
  font-size: .8125rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 40rem) {
  .sf-modal-shell { max-width: 100%; border-left: none; border-right: none; }
  .sf-modal { padding: 0; align-items: flex-end; }
  .sf-modal-shell {
    transform: translateY(100%);
    border-radius: 0;
    max-height: 92dvh;
  }
  .sf-modal.open .sf-modal-shell { transform: none; }
}