/* Social Post display theme
   Scoped so the original Editorial presentation remains unchanged. */

html[data-display-theme="social-post"] {
  background: #e9e7e2;
}

html[data-display-theme="social-post"] body {
  padding: 0;
  color: #262626;
  background:
    radial-gradient(circle at 10% 4%, rgba(198, 165, 109, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 25%, rgba(100, 118, 83, 0.14), transparent 30rem),
    #efeee9;
}

html[data-display-theme="social-post"] body::before,
html[data-display-theme="social-post"] body::after {
  display: none;
}

html[data-display-theme="social-post"] .site-shell {
  width: min(100%, 860px);
  max-width: 860px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 92px 18px 88px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

html[data-display-theme="social-post"] .section {
  width: 100%;
  min-height: 0;
  margin: 0 0 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(38, 38, 38, 0.11);
  border-radius: 22px;
  color: #262626;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 48px rgba(43, 41, 35, 0.09);
  isolation: isolate;
}

html[data-display-theme="social-post"] .section::before,
html[data-display-theme="social-post"] .section::after {
  pointer-events: none;
}

html[data-display-theme="social-post"] .section-heading,
html[data-display-theme="social-post"] .event-heading,
html[data-display-theme="social-post"] .package-heading,
html[data-display-theme="social-post"] .themes-heading,
html[data-display-theme="social-post"] .preview-heading,
html[data-display-theme="social-post"] .photographers-heading,
html[data-display-theme="social-post"] .collaborators-heading,
html[data-display-theme="social-post"] .process-heading,
html[data-display-theme="social-post"] .booking-heading {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 22px 18px 78px;
  border-bottom: 1px solid rgba(38, 38, 38, 0.09);
  color: #262626;
  background: rgba(255, 255, 255, 0.98);
}

html[data-display-theme="social-post"] .section-heading::before,
html[data-display-theme="social-post"] .event-heading::before,
html[data-display-theme="social-post"] .package-heading::before,
html[data-display-theme="social-post"] .themes-heading::before,
html[data-display-theme="social-post"] .preview-heading::before,
html[data-display-theme="social-post"] .photographers-heading::before,
html[data-display-theme="social-post"] .collaborators-heading::before,
html[data-display-theme="social-post"] .process-heading::before,
html[data-display-theme="social-post"] .booking-heading::before {
  content: 'R';
  position: absolute;
  top: 50%;
  left: 22px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #778365, #30392b);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

html[data-display-theme="social-post"] .section-number {
  position: absolute;
  top: 16px;
  right: 20px;
  margin: 0;
  color: #8e8e8e;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

html[data-display-theme="social-post"] .section-heading h2,
html[data-display-theme="social-post"] .event-heading h2,
html[data-display-theme="social-post"] .package-heading h2,
html[data-display-theme="social-post"] .themes-heading h2,
html[data-display-theme="social-post"] .preview-heading h2,
html[data-display-theme="social-post"] .photographers-heading h2,
html[data-display-theme="social-post"] .collaborators-heading h2,
html[data-display-theme="social-post"] .process-heading h2,
html[data-display-theme="social-post"] .booking-heading h2 {
  margin: 0;
  color: #262626;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

html[data-display-theme="social-post"] .eyebrow {
  margin: 0 0 4px;
  color: #8e8e8e;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

html[data-display-theme="social-post"] .event-heading__lead,
html[data-display-theme="social-post"] .themes-heading__intro,
html[data-display-theme="social-post"] .photographers-heading__intro,
html[data-display-theme="social-post"] .collaborators-heading__intro,
html[data-display-theme="social-post"] .booking-heading__lead {
  max-width: none;
  margin: 7px 0 0;
  color: #666;
  font-size: 0.78rem;
  line-height: 1.5;
}

html[data-display-theme="social-post"] .section-footer,
html[data-display-theme="social-post"] .package-footer,
html[data-display-theme="social-post"] .themes-footer,
html[data-display-theme="social-post"] .photographers-footer,
html[data-display-theme="social-post"] .process-footer {
  position: relative;
  z-index: 4;
  width: auto;
  margin: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(38, 38, 38, 0.08);
  color: #737373;
  background: #fff;
  font-size: 0.62rem;
  line-height: 1.55;
}

/* Cover becomes a pinned campaign post. */
html[data-display-theme="social-post"] .section-cover {
  min-height: 720px;
  padding: 0;
  background: #222a20;
}

html[data-display-theme="social-post"] .section-cover::after {
  content: 'PINNED CAMPAIGN';
  position: absolute;
  top: 18px;
  left: 78px;
  z-index: 7;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

html[data-display-theme="social-post"] .cover-logo {
  top: 14px;
  left: 20px;
  z-index: 8;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
}

html[data-display-theme="social-post"] .cover-meta--event {
  top: 38px;
  left: 78px;
  z-index: 8;
  color: #fff;
}

html[data-display-theme="social-post"] .cover-meta--volume {
  top: 24px;
  right: 20px;
  z-index: 8;
  color: rgba(255, 255, 255, 0.62);
}

html[data-display-theme="social-post"] .cover-portrait {
  top: 78px;
  right: 0;
  width: 100%;
  height: 70%;
  border-radius: 0;
}

html[data-display-theme="social-post"] .cover-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

html[data-display-theme="social-post"] .cover-copy {
  right: 0;
  bottom: 48px;
  left: 0;
  z-index: 8;
  padding: 24px;
  color: #fff;
  background: linear-gradient(transparent, rgba(16, 21, 15, 0.9) 48%);
}

html[data-display-theme="social-post"] .cover-copy h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(4.2rem, 14vw, 8.2rem);
  line-height: 0.75;
}

html[data-display-theme="social-post"] .cover-tagline {
  max-width: 320px;
}

html[data-display-theme="social-post"] .cover-index,
html[data-display-theme="social-post"] .cover-scroll {
  bottom: 18px;
  z-index: 9;
}

/* Event post. */
html[data-display-theme="social-post"] .section-event {
  background: #fff;
}

html[data-display-theme="social-post"] .event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-display-theme="social-post"] .event-card__brand {
  min-height: 360px;
  padding: 42px;
  border-radius: 0;
}

html[data-display-theme="social-post"] .event-card__details {
  padding: 20px 22px 22px;
  color: #262626;
  background: #fff;
}

html[data-display-theme="social-post"] .event-links a {
  color: #3154a4;
  border-color: rgba(38, 38, 38, 0.12);
  background: #fafafa;
}

/* Package and process become compact carousel-like posts. */
html[data-display-theme="social-post"] .package-layout,
html[data-display-theme="social-post"] .process-layout {
  padding: 22px;
}

html[data-display-theme="social-post"] .package-item,
html[data-display-theme="social-post"] .process-step {
  border-color: rgba(38, 38, 38, 0.1);
  background: #fafafa;
  box-shadow: none;
}

/* Theme selector and preview posts. */
html[data-display-theme="social-post"] .themes-grid,
html[data-display-theme="social-post"] .preview-layout {
  padding: 22px;
}

html[data-display-theme="social-post"] .theme-card {
  min-height: 220px;
  border-color: rgba(38, 38, 38, 0.12);
  border-radius: 16px;
  box-shadow: none;
}

html[data-display-theme="social-post"] .theme-card__name {
  font-size: clamp(2.8rem, 10vw, 5.4rem);
}

html[data-display-theme="social-post"] .preview-stage {
  min-height: 520px;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}

html[data-display-theme="social-post"] .preview-tabs {
  padding: 14px 0 0;
}

/* Team and collaborator profile posts. */
html[data-display-theme="social-post"] .photographers-grid,
html[data-display-theme="social-post"] .collaborators-grid {
  padding: 22px;
}

html[data-display-theme="social-post"] .photographer-card,
html[data-display-theme="social-post"] .rellusioners-profile,
html[data-display-theme="social-post"] .collaborator-card {
  border: 1px solid rgba(38, 38, 38, 0.1);
  border-radius: 16px;
  color: #262626;
  background: #fff;
  box-shadow: none;
}

html[data-display-theme="social-post"] .collaborator-card__media {
  aspect-ratio: auto;
  min-height: 280px;
  background: #f2f1ed;
}

html[data-display-theme="social-post"] .collaborator-card__image {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

html[data-display-theme="social-post"] .collaborator-card:nth-child(2) .collaborator-card__image {
  object-fit: contain;
  background: #f2f1ed;
}

html[data-display-theme="social-post"] .collaborator-card__body,
html[data-display-theme="social-post"] .rellusioners-profile__copy {
  color: #262626;
  background: #fff;
}

html[data-display-theme="social-post"] .collaborator-links a,
html[data-display-theme="social-post"] .photographer-links a {
  color: #3154a4;
}

/* Booking is the final conversion post. */
html[data-display-theme="social-post"] .section-booking {
  color: #262626;
  background: #fff;
}

html[data-display-theme="social-post"] .booking-layout,
html[data-display-theme="social-post"] .booking-grid {
  padding: 22px;
}

html[data-display-theme="social-post"] .booking-card,
html[data-display-theme="social-post"] .booking-location,
html[data-display-theme="social-post"] .booking-details {
  color: #262626;
  border-color: rgba(38, 38, 38, 0.1);
  background: #fafafa;
  box-shadow: none;
}

html[data-display-theme="social-post"] .booking-button {
  color: #fff;
  background: #384330;
}

html[data-display-theme="social-post"] .language-switcher {
  color: #262626;
  border-color: rgba(38, 38, 38, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 28px rgba(38, 38, 38, 0.09);
}

html[data-display-theme="social-post"] .language-switcher__button {
  color: #737373;
}

html[data-display-theme="social-post"] .language-switcher__button.is-active {
  color: #fff;
  background: #384330;
}

html[data-display-theme="social-post"] .section-navigator__toggle,
html[data-display-theme="social-post"] .section-navigator__panel,
html[data-display-theme="social-post"] .display-theme-menu {
  color: #262626;
  border-color: rgba(38, 38, 38, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 42px rgba(38, 38, 38, 0.14);
}

html[data-display-theme="social-post"] .section-navigator__item {
  color: #737373;
}

html[data-display-theme="social-post"] .section-navigator__item.is-active {
  color: #fff;
  background: #384330;
}

html[data-display-theme="social-post"] .display-theme-menu__heading {
  border-color: rgba(38, 38, 38, 0.1);
}

html[data-display-theme="social-post"] .display-theme-menu__heading small {
  color: #8e8e8e;
}

html[data-display-theme="social-post"] .display-theme-option {
  color: #737373;
}

html[data-display-theme="social-post"] .display-theme-option.is-active {
  color: #262626;
  background: #efeee9;
}

@media (min-width: 721px) {
  html[data-display-theme="social-post"] .site-shell {
    padding: 106px 28px 110px;
  }

  html[data-display-theme="social-post"] .section {
    margin-bottom: 36px;
    border-radius: 26px;
  }

  html[data-display-theme="social-post"] .event-card {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  html[data-display-theme="social-post"] .event-card__brand {
    min-height: 420px;
  }

  html[data-display-theme="social-post"] .themes-grid,
  html[data-display-theme="social-post"] .photographers-grid,
  html[data-display-theme="social-post"] .collaborators-grid {
    gap: 18px;
  }
}

@media (max-width: 560px) {
  html[data-display-theme="social-post"] .site-shell {
    padding: 74px 0 76px;
  }

  html[data-display-theme="social-post"] .section {
    margin-bottom: 14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  html[data-display-theme="social-post"] .section-heading,
  html[data-display-theme="social-post"] .event-heading,
  html[data-display-theme="social-post"] .package-heading,
  html[data-display-theme="social-post"] .themes-heading,
  html[data-display-theme="social-post"] .preview-heading,
  html[data-display-theme="social-post"] .photographers-heading,
  html[data-display-theme="social-post"] .collaborators-heading,
  html[data-display-theme="social-post"] .process-heading,
  html[data-display-theme="social-post"] .booking-heading {
    padding: 17px 18px 15px 70px;
  }

  html[data-display-theme="social-post"] .section-heading::before,
  html[data-display-theme="social-post"] .event-heading::before,
  html[data-display-theme="social-post"] .package-heading::before,
  html[data-display-theme="social-post"] .themes-heading::before,
  html[data-display-theme="social-post"] .preview-heading::before,
  html[data-display-theme="social-post"] .photographers-heading::before,
  html[data-display-theme="social-post"] .collaborators-heading::before,
  html[data-display-theme="social-post"] .process-heading::before,
  html[data-display-theme="social-post"] .booking-heading::before {
    left: 18px;
    width: 38px;
    height: 38px;
  }

  html[data-display-theme="social-post"] .section-cover {
    min-height: 690px;
  }

  html[data-display-theme="social-post"] .cover-portrait {
    height: 66%;
  }

  html[data-display-theme="social-post"] .event-card__brand {
    min-height: 300px;
  }

  html[data-display-theme="social-post"] .package-layout,
  html[data-display-theme="social-post"] .process-layout,
  html[data-display-theme="social-post"] .themes-grid,
  html[data-display-theme="social-post"] .preview-layout,
  html[data-display-theme="social-post"] .photographers-grid,
  html[data-display-theme="social-post"] .collaborators-grid,
  html[data-display-theme="social-post"] .booking-layout,
  html[data-display-theme="social-post"] .booking-grid {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-display-theme="social-post"] *,
  html[data-display-theme="social-post"] *::before,
  html[data-display-theme="social-post"] *::after {
    scroll-behavior: auto !important;
  }
}
