/* PRECEDENCE Socials V24 — clean brick-wall graffiti rebuild. */

body[data-page="socials"] {
  min-height: 100svh;
  background: #a9412e !important;
}

/* One fixed, full-screen brick image: no tiling, no visible seams. */
body[data-page="socials"]::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(42, 11, 5, .10), transparent 18% 82%, rgba(42, 11, 5, .12)),
    linear-gradient(180deg, rgba(255, 239, 204, .04), rgba(42, 11, 5, .08)),
    url("assets/brick-wall-socials.png") center center / cover no-repeat !important;
}

body[data-page="socials"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.07), transparent 22%),
    radial-gradient(circle at 84% 24%, rgba(221,255,0,.045), transparent 24%),
    radial-gradient(circle at 48% 82%, rgba(20,8,4,.10), transparent 34%);
  mix-blend-mode: soft-light;
}

body[data-page="socials"] .site-header,
body[data-page="socials"] main {
  position: relative;
  z-index: 2;
}

body[data-page="socials"] .site-header {
  background: rgba(246,242,232,.95) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

body[data-page="socials"] main,
body[data-page="socials"] .page-view[data-page="socials"] {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

body[data-page="socials"] .site-footer {
  display: none !important;
}

body[data-page="socials"] .socials-v24 {
  width: 100%;
  min-height: calc(100svh - var(--header-height));
  overflow: clip;
}

/* ---------------------------------------------------------------
   HERO — one cohesive wall mural, no pole, no poster, no duplicate CTA
   --------------------------------------------------------------- */
body[data-page="socials"] .socials-v24-hero {
  position: relative;
  isolation: isolate;
  min-height: max(720px, calc(100svh - var(--header-height)));
  padding: clamp(36px, 5vw, 76px) clamp(20px, 5vw, 86px) clamp(54px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body[data-page="socials"] .socials-v24-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(1120px, 86vw);
  height: min(620px, 68vh);
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-1deg);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(9,12,11,.13), transparent 69%),
    radial-gradient(ellipse at 48% 58%, rgba(222,255,0,.09), transparent 60%);
  filter: blur(2px);
  clip-path: polygon(4% 7%, 96% 0, 100% 87%, 91% 100%, 8% 96%, 0 24%);
}






body[data-page="socials"] .socials-v24-heading {
  position: relative;
  width: min(960px, 86vw);
  margin: 0 auto clamp(2px, 1vw, 14px);
  display: flex;
  justify-content: center;
}

body[data-page="socials"] .socials-v24-heading img {
  width: 100%;
  height: auto;
  transform: rotate(-1deg);
  filter:
    drop-shadow(10px 12px 0 rgba(45,10,4,.20))
    drop-shadow(0 1px 0 rgba(255,255,255,.18));
}

body[data-page="socials"] .socials-v24-links {
  position: relative;
  width: min(1260px, 96vw);
  margin: 0 auto;
}

body[data-page="socials"] .socials-v24-quick-heading {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: -12px auto -20px;
}


body[data-page="socials"] .socials-v24-quick-heading img {
  width: min(285px, 30vw);
  height: auto;
  transform: rotate(-3deg);
  filter: drop-shadow(6px 8px 0 rgba(45,10,4,.19));
}

body[data-page="socials"] .socials-v24-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2px, .4vw, 8px) clamp(12px, 1.3vw, 24px);
}

body[data-page="socials"] .socials-v24-link {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: clamp(190px, 20vw, 290px);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease;
}

body[data-page="socials"] .socials-v24-link::before {
  content: "";
  position: absolute;
  inset: 13%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17,19,15,.08), transparent 68%);
  filter: blur(4px);
}

body[data-page="socials"] .socials-v24-link.instagram { transform: rotate(-2.4deg) translateY(4%); }
body[data-page="socials"] .socials-v24-link.x { transform: rotate(2deg) translateY(-2%); }
body[data-page="socials"] .socials-v24-link.youtube { transform: rotate(-1deg) translateY(3%); }
body[data-page="socials"] .socials-v24-link.tiktok { transform: rotate(2.2deg) translateY(-1%); }

body[data-page="socials"] .socials-v24-link img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(7px 9px 0 rgba(45,10,4,.20));
}

body[data-page="socials"] .socials-v24-link.instagram img { width: 96%; }
body[data-page="socials"] .socials-v24-link.x img { width: 74%; }
body[data-page="socials"] .socials-v24-link.youtube img { width: 94%; }
body[data-page="socials"] .socials-v24-link.tiktok img { width: 84%; }

body[data-page="socials"] .socials-v24-link:hover,
body[data-page="socials"] .socials-v24-link:focus-visible {
  z-index: 8;
  outline: none;
  transform: rotate(0) translateY(-9px) scale(1.055);
  filter: saturate(1.08) brightness(1.035);
}

body[data-page="socials"] .socials-v24-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 4px dashed #dfff00;
  border-radius: 30px;
}

/* ---------------------------------------------------------------
   LATEST POSTS — one title, large horizontally-scrollable feed wall
   --------------------------------------------------------------- */
body[data-page="socials"] .socials-v24-latest {
  position: relative;
  z-index: 3;
  min-height: calc(100svh - var(--header-height));
  width: min(1540px, calc(100% - 30px));
  margin: 0 auto;
  padding: clamp(58px, 7vw, 104px) clamp(8px, 1.5vw, 24px) clamp(78px, 9vw, 128px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: calc(var(--header-height) + 10px);
}



body[data-page="socials"] .socials-v24-latest-banner {
  position: relative;
  align-self: center;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 8px 20px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(34px, 4vw, 58px);
  padding: 17px 34px 16px;
  color: #f7edda;
  background: #11130f;
  border: 2px solid #11130f;
  box-shadow: 12px 12px 0 rgba(45,10,4,.44);
  transform: rotate(-.8deg);
  clip-path: polygon(0 6%, 99% 0, 100% 92%, 97% 100%, 1% 97%);
}

body[data-page="socials"] .socials-v24-latest-banner::before,
body[data-page="socials"] .socials-v24-latest-banner::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 84px;
  height: 31px;
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  opacity: .91;
}

body[data-page="socials"] .socials-v24-latest-banner::before { left: 7%; transform: rotate(-8deg); }
body[data-page="socials"] .socials-v24-latest-banner::after { right: 7%; transform: rotate(8deg); }

body[data-page="socials"] .socials-v24-latest-banner span {
  align-self: center;
  padding: 4px 8px;
  color: #11130f;
  background: #dfff00;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

body[data-page="socials"] .socials-v24-latest-banner h2 {
  margin: 0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.3rem, 5.6vw, 6.5rem);
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

body[data-page="socials"] .socials-v24-latest-banner small {
  grid-column: 1 / -1;
  justify-self: end;
  color: rgba(247,237,218,.70);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body[data-page="socials"] .socials-v24-feed-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(390px, 31vw);
  gap: clamp(22px, 2.8vw, 42px);
  width: 100%;
  padding: 18px 18px 38px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 18px;
  scrollbar-width: auto;
  scrollbar-color: #11130f rgba(255,244,220,.56);
  overscroll-behavior-inline: contain;
}

body[data-page="socials"] .socials-v24-feed-rail:focus-visible {
  outline: 4px dashed #dfff00;
  outline-offset: 6px;
}

body[data-page="socials"] .socials-v24-feed-rail::-webkit-scrollbar { height: 16px; }
body[data-page="socials"] .socials-v24-feed-rail::-webkit-scrollbar-track {
  border: 2px solid #11130f;
  background: rgba(255,244,220,.76);
}
body[data-page="socials"] .socials-v24-feed-rail::-webkit-scrollbar-thumb {
  border: 2px solid #11130f;
  background: #dfff00;
}

body[data-page="socials"] .socials-v24-feed {
  position: relative;
  min-height: clamp(580px, 68svh, 790px);
  height: clamp(580px, 68svh, 790px);
  overflow: auto;
  scroll-snap-align: start;
  border: 3px solid #11130f;
  background: rgba(255,249,236,.98);
  box-shadow: 12px 12px 0 rgba(45,10,4,.42);
}

body[data-page="socials"] .socials-v24-feed::before {
  content: "";
  position: absolute;
  z-index: 9;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 34px;
  transform: translateX(-50%) rotate(-3deg);
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  pointer-events: none;
}

body[data-page="socials"] .socials-v24-feed:nth-child(1) { transform: rotate(-.55deg); }
body[data-page="socials"] .socials-v24-feed:nth-child(2) { transform: rotate(.45deg); }
body[data-page="socials"] .socials-v24-feed:nth-child(3) { transform: rotate(-.25deg); }

body[data-page="socials"] .socials-v24-feed-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 15px;
  border-bottom: 3px solid #11130f;
  background: #11130f;
  color: #f8efdf;
}

body[data-page="socials"] .socials-v24-feed-head strong {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.65rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}

body[data-page="socials"] .socials-v24-feed-head span {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dfff00;
}

body[data-page="socials"] .socials-v24-feed .native-embed,
body[data-page="socials"] .socials-v24-feed .media-fallback {
  min-height: calc(100% - 64px);
}

body[data-page="socials"] .socials-v24-feed .instagram-media,
body[data-page="socials"] .socials-v24-feed .tiktok-embed {
  min-width: 100% !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  body[data-page="socials"] .socials-v24-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(820px, 96vw);
    margin-inline: auto;
  }

  body[data-page="socials"] .socials-v24-link {
    min-height: clamp(160px, 31vw, 250px);
  }

  body[data-page="socials"] .socials-v24-link.instagram img { width: 86%; }
  body[data-page="socials"] .socials-v24-link.x img { width: 64%; }
  body[data-page="socials"] .socials-v24-link.youtube img { width: 85%; }
  body[data-page="socials"] .socials-v24-link.tiktok img { width: 70%; }
}

@media (max-width: 760px) {
  body[data-page="socials"]::before {
    background:
      linear-gradient(90deg, rgba(42,11,5,.07), transparent 18% 82%, rgba(42,11,5,.08)),
      linear-gradient(180deg, rgba(255,239,204,.03), rgba(42,11,5,.07)),
      url("assets/brick-wall-socials.png") center center / cover no-repeat !important;
  }

  body[data-page="socials"] .socials-v24-hero {
    min-height: calc(100svh - var(--header-height));
    padding: 28px 8px 42px;
  }

  body[data-page="socials"] .socials-v24-heading {
    width: min(100%, 620px);
    margin-bottom: 8px;
  }

  body[data-page="socials"] .socials-v24-quick-heading {
    margin: -4px auto -2px;
  }

  body[data-page="socials"] .socials-v24-quick-heading img {
    width: min(230px, 58vw);
  }

  body[data-page="socials"] .socials-v24-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
    width: 100%;
  }

  body[data-page="socials"] .socials-v24-link {
    min-height: clamp(124px, 38vw, 180px);
  }

  body[data-page="socials"] .socials-v24-link.instagram img { width: 98%; }
  body[data-page="socials"] .socials-v24-link.x img { width: 78%; }
  body[data-page="socials"] .socials-v24-link.youtube img { width: 98%; }
  body[data-page="socials"] .socials-v24-link.tiktok img { width: 88%; }


  body[data-page="socials"] .socials-v24-latest {
    width: calc(100% - 10px);
    min-height: 100svh;
    padding: 50px 0 78px;
  }

  body[data-page="socials"] .socials-v24-latest-banner {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-bottom: 30px;
    padding: 14px 20px 13px;
    text-align: center;
  }

  body[data-page="socials"] .socials-v24-latest-banner span,
  body[data-page="socials"] .socials-v24-latest-banner small {
    justify-self: center;
  }

  body[data-page="socials"] .socials-v24-latest-banner h2 {
    font-size: clamp(2.7rem, 13vw, 4.2rem);
  }

  body[data-page="socials"] .socials-v24-feed-rail {
    grid-auto-columns: 88vw;
    gap: 18px;
    padding: 14px 6vw 32px;
    scroll-padding-inline: 6vw;
  }

  body[data-page="socials"] .socials-v24-feed {
    min-height: 68svh;
    height: 68svh;
    transform: none !important;
    box-shadow: 8px 8px 0 rgba(45,10,4,.40);
  }

  body[data-page="socials"] .socials-v24-feed-head strong {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="socials"] .socials-v24-link {
    transition: none;
  }
}

/* V26 clean brick transition — no decorative bars, dividers, or paint strokes. */
body[data-page="socials"] .socials-v24-latest::before {
  content: "";
  position: absolute;
  inset: 18px -8vw 0;
  z-index: -2;
  border: 0;
  background: rgba(255, 244, 220, 0.025);
  box-shadow: none;
}
body[data-page="socials"] .socials-v24-hero::after,
body[data-page="socials"] .socials-v24-latest::after,
body[data-page="socials"] .socials-v24-quick-heading::after,
body[data-page="socials"] .socials-v24-paint {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------------
   V27 refinements — graffiti latest-post graphic + taped embed area
   --------------------------------------------------------------- */
body[data-page="socials"] .socials-v24-latest-banner {
  display: block;
  width: min(760px, 92vw);
  margin: 0 auto clamp(30px, 4vw, 50px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: rotate(-1.4deg);
  clip-path: none;
}

body[data-page="socials"] .socials-v24-latest-banner::before,
body[data-page="socials"] .socials-v24-latest-banner::after,
body[data-page="socials"] .socials-v24-latest-banner span,
body[data-page="socials"] .socials-v24-latest-banner small {
  display: none !important;
  content: none !important;
}

body[data-page="socials"] .socials-v27-latest-banner img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(14px 14px 0 rgba(15, 10, 8, 0.30));
}

body[data-page="socials"] .socials-v24-feed {
  overflow: visible;
}

body[data-page="socials"] .socials-v24-feed .native-embed,
body[data-page="socials"] .socials-v24-feed .media-fallback {
  position: relative;
  min-height: calc(100% - 64px);
  overflow: auto;
  background: rgba(255,249,236,.96);
}

body[data-page="socials"] .socials-v24-feed .native-embed::before,
body[data-page="socials"] .socials-v24-feed .media-fallback::before {
  content: "";
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 50%;
  width: 96px;
  height: 34px;
  transform: translateX(-50%) rotate(-2deg);
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  pointer-events: none;
}

body[data-page="socials"] .socials-v24-feed .native-embed > *,
body[data-page="socials"] .socials-v24-feed .media-fallback > * {
  margin-top: 30px;
}

body[data-page="socials"] .socials-v24-feed .instagram-media,
body[data-page="socials"] .socials-v24-feed .tiktok-embed,
body[data-page="socials"] .socials-v24-feed .youtube-fallback {
  margin-inline: auto;
}

@media (max-width: 760px) {
  body[data-page="socials"] .socials-v24-latest-banner {
    width: min(88vw, 520px);
    margin-bottom: 24px;
    transform: rotate(-1deg);
  }

  body[data-page="socials"] .socials-v24-feed .native-embed::before,
  body[data-page="socials"] .socials-v24-feed .media-fallback::before {
    width: 82px;
    height: 28px;
    top: 8px;
  }
}

/* ===============================================================
   V28 — hard replacement of Latest Post art + real feed-card tape
   =============================================================== */
body[data-page="socials"] .socials-v24-latest-banner,
body[data-page="socials"] .socials-v27-latest-banner {
  display: block !important;
  width: min(660px, 86vw) !important;
  max-width: none !important;
  margin: 0 auto clamp(26px, 3.5vw, 44px) !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: rotate(-1deg) !important;
}

body[data-page="socials"] .socials-v24-latest-banner > img,
body[data-page="socials"] .socials-v27-latest-banner > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: drop-shadow(11px 12px 0 rgba(45,10,4,.28));
}

body[data-page="socials"] .socials-v24-latest-banner::before,
body[data-page="socials"] .socials-v24-latest-banner::after,
body[data-page="socials"] .socials-v24-latest-banner > span,
body[data-page="socials"] .socials-v24-latest-banner > small,
body[data-page="socials"] .socials-v24-latest-banner > h2:not(.sr-only) {
  display: none !important;
  content: none !important;
}

body[data-page="socials"] .socials-v24-feed-rail {
  padding-top: 30px !important;
}

body[data-page="socials"] .socials-v24-feed {
  position: relative !important;
  overflow: visible !important;
}

/* Disable old pseudo tape and use actual HTML image instead. */
body[data-page="socials"] .socials-v24-feed::before {
  display: none !important;
  content: none !important;
}

body[data-page="socials"] .socials-v28-feed-tape {
  position: absolute !important;
  z-index: 40 !important;
  top: -20px !important;
  left: 50% !important;
  display: block !important;
  width: 112px !important;
  height: 42px !important;
  max-width: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  transform: translateX(-50%) rotate(-3deg) !important;
  filter: drop-shadow(0 3px 2px rgba(20,12,8,.22));
}

body[data-page="socials"] .socials-v24-feed:nth-child(2) .socials-v28-feed-tape {
  transform: translateX(-50%) rotate(3deg) !important;
}
body[data-page="socials"] .socials-v24-feed:nth-child(3) .socials-v28-feed-tape {
  transform: translateX(-50%) rotate(-1deg) !important;
}

/* Tape crosses the black platform header like a real poster mount. */
body[data-page="socials"] .socials-v24-feed-head {
  position: relative !important;
  z-index: 8 !important;
  padding-top: 24px !important;
}

/* Remove the hidden inner tape from V27 so there is only one obvious strip. */
body[data-page="socials"] .socials-v24-feed .native-embed::before,
body[data-page="socials"] .socials-v24-feed .media-fallback::before {
  display: none !important;
  content: none !important;
}
body[data-page="socials"] .socials-v24-feed .native-embed > *,
body[data-page="socials"] .socials-v24-feed .media-fallback > * {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  body[data-page="socials"] .socials-v24-latest-banner,
  body[data-page="socials"] .socials-v27-latest-banner {
    width: min(520px, 88vw) !important;
    margin-bottom: 24px !important;
  }

  body[data-page="socials"] .socials-v24-feed-rail {
    padding-top: 26px !important;
  }

  body[data-page="socials"] .socials-v28-feed-tape {
    top: -16px !important;
    width: 92px !important;
    height: 35px !important;
  }
}

/* V29 deployment-proof final overrides */
body[data-page="socials"] .socials-v28-feed-tape {
  top: -9px !important;
  width: 118px !important;
  height: 44px !important;
  z-index: 100 !important;
}
body[data-page="socials"] .socials-v24-feed-head {
  padding-top: 25px !important;
}

/* V30 — tape bridges the brick wall and poster edge */
body[data-page="socials"] .socials-v24-feed-rail {
  padding-top: 44px !important;
}

body[data-page="socials"] .socials-v28-feed-tape {
  top: -29px !important;
  width: 122px !important;
  height: 46px !important;
  z-index: 120 !important;
}

body[data-page="socials"] .socials-v24-feed:nth-child(1) .socials-v28-feed-tape {
  transform: translateX(-50%) rotate(-4deg) !important;
}
body[data-page="socials"] .socials-v24-feed:nth-child(2) .socials-v28-feed-tape {
  transform: translateX(-50%) rotate(3deg) !important;
}
body[data-page="socials"] .socials-v24-feed:nth-child(3) .socials-v28-feed-tape {
  transform: translateX(-50%) rotate(-2deg) !important;
}

@media (max-width: 760px) {
  body[data-page="socials"] .socials-v24-feed-rail {
    padding-top: 38px !important;
  }

  body[data-page="socials"] .socials-v28-feed-tape {
    top: -24px !important;
    width: 100px !important;
    height: 38px !important;
  }
}