/* ===============================
   HIDE HOMEPAGE ELEMENTS
   =============================== */
.home .entry-title,
.home .page-title {
  display: none;
}

.home .wp-site-blocks > header,
.home header.wp-block-template-part {
  display: none !important;
}

/* Homepage Footer */
.home footer,
.home .wp-site-blocks > footer,
.home footer.wp-block-template-part {
  display: none !important;
}

/* Homepage Spacing */
.home .wp-site-blocks,
.home main,
.home .wp-block-post-content {
  padding-top: 8vh !important;
}

/* ===============================
   NAVIGATION STYLING
   =============================== */
.wp-block-navigation-item__content {
  text-transform: uppercase !important;
  font-size: 0.95rem;
  transition: opacity 0.2s ease !important;
}

.wp-block-navigation-item__content:hover {
  opacity: 0.75;
}

.wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__content {
  color: #7bb6c1 !important;
}

.wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content {
  color: #9993d2 !important;
}

.wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content {
  color: #da929a !important;
}


/* ===============================
   SOCIAL ICONS
   =============================== */
.wp-block-social-links,
.wp-block-social-links * {
  background: none !important;
}

.wp-block-social-links a {
  background-color: rgba(144, 195, 193, 0.08) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background-color 200ms ease !important;
}

.wp-block-social-links svg,
.wp-block-social-links svg * {
  fill: #90c3c1 !important;
  stroke: none !important;
  opacity: 0.6 !important;
  transition: opacity 200ms ease !important;
}

.wp-block-social-links a:hover {
  background-color: #7bb6c1 !important;
}

.wp-block-social-links a:hover svg,
.wp-block-social-links a:hover svg * {
  fill: #ede4d7 !important;
  opacity: 1 !important;
  stroke: none !important;
}

/* ===============================
   HOMEPAGE HEADINGS & IMAGES
   =============================== */
.home h5 {
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
}

.home .wp-block-image {
  margin-top: 4vh !important;
  margin-bottom: 1.25rem !important;
}

.home .wp-block-navigation {
  margin-top: 1rem !important;
  margin-bottom: 1.2rem !important;
}

.home .wp-block-social-links {
  margin-top: 0.25rem !important;
}

/* Homepage Background */
.home {
  background-image: url("https://bykela.com/wp-content/uploads/2026/02/Homepage-Bgrd@2x-1.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
}


/* Desktop adjustments */
@media (min-width: 1024px) {
  .home .wp-site-blocks {
    padding-top: 12vh !important;
  }
}

/* ===============================
   ABOUT PAGE
   =============================== */
/* About page main split container */
.page-id-166 .about-split {
    max-width: 1200px;
    margin: 0 auto;
    padding: .10rem 2.80rem;
}

/* Image column */
.page-id-166 .about-split .wp-block-column:first-child {
    display: flex;
    justify-content: center;
    flex: 0 0 52%;
    max-width: 52%;
}

.page-id-166 .about-split .wp-block-column:first-child img {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.page-id-166 .about-split {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.10rem !important;      /* gap between columns */
    align-items: center !important; /* vertical center both columns */
}

/* Image column */
.page-id-166 .about-split .wp-block-column:first-child {
    flex: 0 0 52%;
    max-width: 52%;
    display: flex;
    justify-content: center;      /* center image horizontally */
    margin: 0 !important;
}

/* Text column */
.page-id-166 .about-split .wp-block-column:last-child {
    flex: 0 0 48%;
    max-width: 48%;
    margin: 0 !important;
}
/* Text styling */
.page-id-166 .about-split p {
  font-family: "Gloria Hallelujah", cursive !important;
  font-size: 16px !important; /* increased size */
  line-height: 1.65 !important;
}


/* ===============================
   BACK TO TOP
   =============================== */
body:not(.home) .back-to-top {
  text-align: center;
  margin: 4rem 0 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

body:not(.home) .back-to-top:hover {
  opacity: 1;
}

/* Hide completely on homepage */
.home .back-to-top {
  display: none !important;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

footer,
.wp-site-blocks > footer,
footer.wp-block-template-part {
  display: none !important;
}

/* Logo styling */
.subpage-logo {
    font-weight: 700;
    font-size: 18px;
    color: #000000 !important;   /* force black */
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Logo hover */
.subpage-logo:hover {
    color: #FF6F61 !important;   /* pink hover */
    -webkit-text-stroke: 0;
}

body:not(.home) .subpage-tabs {
    display: flex !important;
    gap: 70px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
}


/* Tabs links */
.subpage-tabs a {
    color: #000000 !important;    /* force black */
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Tabs hover */
.subpage-tabs a:hover {
    color: #93c4c1 !important;    /* pink hover */
}

.subpage-tabs a.current {
    color: #93c4c1!important; /* highlight current page in pink */
}

body:not(.home) header.wp-block-template-part,
body:not(.home) .wp-site-blocks > header {
    display: none !important;
}

/* ===============================
   NON-HOMEPAGE: navigation → first image spacing
   =============================== */

.subpage-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px; /* distance from top of page */
  margin-bottom: 0rem !important; /* distance to first image */
}

.kela-logo {
  position: relative;
  display: inline-block; /* container width fits first logo */
  text-align: center;    /* center child figures */
  vertical-align: middle;
}

/* Keep first logo visible and in flow */
.kela-logo .wp-block-image:first-child {
  position: relative;
  z-index: 2;
  margin: 0 auto !important; /* center */
}

/* Overlay second logo perfectly on top */
.kela-logo .wp-block-image:last-child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  margin: 0 !important; /* remove default WP margin */
}

/* Smooth opacity fade */
.kela-logo .wp-block-image {
  transition: opacity 0.25s ease;
}

/* Hover swap */
.kela-logo:hover .wp-block-image:first-child {
  opacity: 0;
}

.kela-logo:hover .wp-block-image:last-child {
  opacity: 1;
}

.highlight-pink {
    color: #FF6F61 !important;
}


@media (max-width: 768px) {
  .home h5 {
    font-size: .95em !important; /* half size relative to current */
    line-height: 1.2 !important;
  }
}

@media (max-width: 768px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important; /* hide hamburger button */
  }

  .wp-block-navigation__responsive-container {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .wp-block-navigation__container {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }
}


@media (max-width: 500px) {
  .home .wp-block-image img {
    width: 50% !important;  /* 25% smaller */
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 500px) {
  .home .wp-block-image {    			margin-top: 4vh !important;
    margin-bottom: 0.75rem !important;
  }
}


  .home figure.wp-block-image img,
  .home .wp-block-image img {
    display: inline-block !important;
    width: 50% !important;   /* 25% smaller */
		height: auto !important;}
 

@media (max-width: 768px) {
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .page-id-166 .about-split {
    max-width: none !important;
    width: 100% !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  .page-id-166 .about-split .wp-block-column:first-child,
  .page-id-166 .about-split .wp-block-column:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {

  /* Only subpages (not home) */
  body:not(.home) .subpage-nav {
    position: relative;
    width: 100%;
  }

  /* Hide checkbox */
  body:not(.home) .subnav-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* Hamburger button (top-right aligned with logo row) */
  body:not(.home) .subnav-hamburger {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 10001;
  }

  /* 3-line hamburger icon */
  body:not(.home) .subnav-hamburger::before {
    content: "";
    position: absolute;
    right: 50px;
    top: 14px;
    width: 22px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
  }

  /* Turn into X when open */
  body:not(.home) .subnav-checkbox:checked + .subnav-hamburger::before {
    top: 22px;
    box-shadow: none;
    transform: rotate(45deg);
  }
  body:not(.home) .subnav-checkbox:checked + .subnav-hamburger::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 22px;
    width: 22px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
  }

  /* Closed by default on mobile */
  body:not(.home) .subpage-tabs {
    display: none !important;
  }

  /* Full-screen overlay when open */
  body:not(.home) .subnav-checkbox:checked ~ .subpage-tabs {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;

    background: rgba(20, 20, 20, 0.96);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Big centered links */
  body:not(.home) .subnav-checkbox:checked ~ .subpage-tabs a {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0.02em;
  }
}

.subnav-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

/* Only show the hamburger button on mobile subpages */
.subnav-hamburger {
  display: none !important;
}

@media (max-width: 768px) {

  /* Make sure the label can position pseudo-elements */
  body:not(.home) .subnav-hamburger {
    position: absolute;
    top: 0;
    right: 15px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 10001;
    display: block !important;
    color: #000;              /* <- forces a visible icon */
  }

  /* Create BOTH bars (we'll use them as hamburger + X) */
  body:not(.home) .subnav-hamburger::before,
  body:not(.home) .subnav-hamburger::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 21px;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }

  /* HAMBURGER STATE: 3 lines using box-shadow on ::before, hide ::after */
  body:not(.home) .subnav-hamburger::before {
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
    transform: rotate(0deg);
  }
  body:not(.home) .subnav-hamburger::after {
    opacity: 0;
    transform: rotate(0deg);
  }

  /* OPEN STATE: turn into X */
  body:not(.home) .subnav-checkbox:checked + .subnav-hamburger::before {
    box-shadow: none;
    transform: rotate(45deg);
  }
  body:not(.home) .subnav-checkbox:checked + .subnav-hamburger::after {
    opacity: 1;
    transform: rotate(-45deg);
  }

}

@media (max-width: 768px) {
  body:not(.home) .subnav-hamburger{
    position: fixed !important;
		top: 28px !important;     /* adjust this up/down */    right: 24px !important;
    z-index: 10001 !important;
  }
}

/* ===============================
   MOBILE SUBPAGE HAMBURGER NAV
   =============================== */
@media (max-width: 768px) {

  /* Hide WordPress default nav hamburger on subpages */
  body:not(.home) .wp-block-navigation__responsive-container-open,
  body:not(.home) .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Hide custom hamburger everywhere by default */
  .subnav-hamburger {
    display: none !important;
  }

  /* Show custom hamburger ONLY on mobile subpages */
  body:not(.home) .subnav-hamburger {
    display: block !important;
    position: fixed !important;
    top: 30px !important;      
    right: 18px !important;
    width: 44px;
    height: 44px;
    z-index: 10001 !important;
    cursor: pointer;
    color: #000;
  }

  /* Hamburger icon (3 lines) */
  body:not(.home) .subnav-hamburger::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 21px;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.25s ease, box-shadow 0.25s;
	}
}
	
	@media (max-width: 768px) {
  body.home {
    padding-top: 38px;   /* adjust: 6–16px usually feels right */
  }
}

/* =========================================
   ECOSYSTEMS (52) / ART DIRECTION (368) / EVENTS (371)
   Width + Image/Title Spacing Adjustments
   ========================================= */

/* 1️⃣ Expand content + wide layout width on these pages only */
body.page-id-52,
body.page-id-368,
body.page-id-371 {
  --wp--style--global--content-size: 1400px;
  --wp--style--global--wide-size: 1600px;
}


/* 2️⃣ Reduce space under images */
body.page-id-52 figure.wp-block-image,
body.page-id-368 figure.wp-block-image,
body.page-id-371 figure.wp-block-image,
body.page-id-52 .wp-block-post-featured-image,
body.page-id-368 .wp-block-post-featured-image,
body.page-id-371 .wp-block-post-featured-image {
  margin-bottom: 6px !important;
}


/* Remove extra space above titles */
body.page-id-52 .wp-block-post-title,
body.page-id-368 .wp-block-post-title,
body.page-id-371 .wp-block-post-title,
body.page-id-52 h2,
body.page-id-52 h3,
body.page-id-52 h4,
body.page-id-52 h5,
body.page-id-52 h6,
body.page-id-368 h2,
body.page-id-368 h3,
body.page-id-368 h4,
body.page-id-368 h5,
body.page-id-368 h6,
body.page-id-371 h2,
body.page-id-371 h3,
body.page-id-371 h4,
body.page-id-371 h5,
body.page-id-371 h6 {
  margin-top: 0 !important;
}

/* =========================================
   ECOSYSTEMS / ART DIRECTION / EVENTS
   Grayscale → Color Hover Effect
   ========================================= */

/* Default: grey */
body.page-id-52 .wp-block-image img,
body.page-id-368 .wp-block-image img,
body.page-id-371 .wp-block-image img,
body.page-id-52 .wp-block-post-featured-image img,
body.page-id-368 .wp-block-post-featured-image img,
body.page-id-371 .wp-block-post-featured-image img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

/* Hover: full color */
body.page-id-52 .wp-block-image:hover img,
body.page-id-368 .wp-block-image:hover img,
body.page-id-371 .wp-block-image:hover img,
body.page-id-52 .wp-block-post-featured-image:hover img,
body.page-id-368 .wp-block-post-featured-image:hover img,
body.page-id-371 .wp-block-post-featured-image:hover img {
  filter: grayscale(0%);
}

/* =========================================
   ECOSYSTEMS / ART DIRECTION / EVENTS
   Precise Image ↔ H6 Spacing
   ========================================= */

/* 1️⃣ Space under image (image → H6) */
body.page-id-52 .wp-block-image,
body.page-id-368 .wp-block-image,
body.page-id-371 .wp-block-image,
body.page-id-52 .wp-block-post-featured-image,
body.page-id-368 .wp-block-post-featured-image,
body.page-id-371 .wp-block-post-featured-image {
  margin-bottom: 6px !important;   /* 5–6px below image */
}


/* 2️⃣ Remove extra space above H6 */
body.page-id-52 h6,
body.page-id-368 h6,
body.page-id-371 h6,
body.page-id-52 .wp-block-post-title,
body.page-id-368 .wp-block-post-title,
body.page-id-371 .wp-block-post-title {
  margin-top: 0 !important;
  margin-bottom: 30px !important;  /* 30px before next image */
}

body.page-id-52 .wp-block-image.is-active img,
  body.page-id-368 .wp-block-image.is-active img,
  body.page-id-371 .wp-block-image.is-active img,
  body.page-id-52 .wp-block-post-featured-image.is-active img,
  body.page-id-368 .wp-block-post-featured-image.is-active img,
  body.page-id-371 .wp-block-post-featured-image.is-active img {
    filter: grayscale(0%);
  }


/* ==========================================================
   REAL FIX: REMOVE GUTENBERG CONSTRAINED CLAMP (CONTENT ONLY)
   Excludes: Home, 52, 368, 371, 166, 10
   Protects nav/logo: .mobile-logo-nav
   ========================================================== */

/* Keep 10px gutters in content */
body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content.has-global-padding {
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* This is the clamp: children of is-layout-constrained get a max-width.
   We override it ONLY for content blocks that are NOT the nav/logo group. */
body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content.is-layout-constrained
> :where(:not(.mobile-logo-nav)) {
  max-width: none !important;
  width: calc(100% - 20px) !important;   /* 10px each side */
  margin-left: auto !important;          /* keep centered */
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* FLUSH stacked images (but never touch nav/logo group) */
body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content > :not(.mobile-logo-nav) figure.wp-block-image {
  margin: 0 !important;
  line-height: 0 !important;
}

body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content > :not(.mobile-logo-nav) figure.wp-block-image img {
  display: block !important;
}

/* ==========================================================
   CENTER + WIDEN MANUAL IMAGE BLOCK STACKS (without touching nav)
   Excludes: Home, 52, 368, 371, 166, 10
   Protects: .mobile-logo-nav
   ========================================================== */

/* 10px gutters on the content wrapper */
body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content.has-global-padding {
  padding-left: 0px !important;
  padding-right: 0px !important;
  box-sizing: border-box !important;
  --wp--style--block-gap: 0px !important;
}

/* Force manual image blocks to CENTER and use full available width
   (but never inside the nav/logo group) */
body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content :where(figure.wp-block-image, .wp-block-image):not(.mobile-logo-nav):not(.kela-logo) {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 0 !important;
}

/* Make the actual image fill the block */
body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
main .entry-content.wp-block-post-content :where(figure.wp-block-image, .wp-block-image):not(.mobile-logo-nav):not(.kela-logo) img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================
   MOBILE FIX (<=768px): 10px gutters + flush full-width images
   Excludes nav/logo groups
   ========================================================== */
@media (max-width: 768px) {

  /* Keep content gutters tight */
  body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
  main .entry-content.wp-block-post-content.has-global-padding {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Full width + flush for content images only (NOT nav/logo) */
  body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
  main .entry-content.wp-block-post-content
  :where(figure.wp-block-image, .wp-block-image):not(.mobile-logo-nav):not(.kela-logo) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    line-height: 0 !important;
  }

  body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
  main .entry-content.wp-block-post-content
  :where(figure.wp-block-image, .wp-block-image):not(.mobile-logo-nav):not(.kela-logo) img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Remove any accidental block spacing between images */
  body:not(.home):not(.page-id-52):not(.page-id-368):not(.page-id-371):not(.page-id-166):not(.page-id-10)
  main .entry-content.wp-block-post-content {
    --wp--style--block-gap: 0px !important;
  }
}

/* =========================================
   OFTA — CAROUSEL (scoped ONLY to .ofta-carousel)
   ========================================= */

.ofta-carousel{
  display: grid;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* adjust if needed */
}

/* Stack everything */
.ofta-carousel > *{
  grid-area: 1 / 1;
}

/* Animate the actual image figures */
.ofta-carousel figure.wp-block-image{
  margin: 0 !important;
  opacity: 0;
  animation: oftaFade 21s infinite;
}

.ofta-carousel figure.wp-block-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* switch to cover if you want crop */
  display: block !important;
}

/* 7-image timing */
.ofta-carousel figure.wp-block-image:nth-of-type(1){ animation-delay: 0s; }
.ofta-carousel figure.wp-block-image:nth-of-type(2){ animation-delay: 4s; }
.ofta-carousel figure.wp-block-image:nth-of-type(3){ animation-delay: 8s; }
.ofta-carousel figure.wp-block-image:nth-of-type(4){ animation-delay: 12s; }
.ofta-carousel figure.wp-block-image:nth-of-type(5){ animation-delay: 16s; }
.ofta-carousel figure.wp-block-image:nth-of-type(6){ animation-delay: 20s; }
.ofta-carousel figure.wp-block-image:nth-of-type(7){ animation-delay: 24s; }

@keyframes oftaFade{
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  24%  { opacity: 1; }
  32%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .ofta-carousel figure.wp-block-image{
    animation: none;
    opacity: 1;
  }
  .ofta-carousel{ aspect-ratio: auto; }
}

/* ==========================================================
   OFTA — CUSTOM SPLIT + CAROUSEL
   ========================================================== */

/* ======================
   SPLIT LAYOUT
   ====================== */

.ofta-split{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px !important;
}

/* Left column (carousel smaller) */
.ofta-split > .wp-block-column:first-child{
  flex: 0 0 35% !important;
  max-width: 35% !important;
}

/* Right column (hero image larger) */
.ofta-split > .wp-block-column:last-child{
  flex: 0 0 55% !important;
  max-width: 55% !important;
}

/* Ensure images scale correctly */
.ofta-split img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ======================
   CAROUSEL
   ====================== */

.ofta-carousel{
  display: grid;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* Stack images */
.ofta-carousel > *{
  grid-area: 1 / 1;
}

/* Animate figures */
.ofta-carousel figure.wp-block-image{
  margin: 0 !important;
  opacity: 0;
  animation: oftaFade 21s infinite;
}

.ofta-carousel figure.wp-block-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* change to cover if you want cropping */
  display: block !important;
}

/* 7-image timing */
.ofta-carousel figure.wp-block-image:nth-of-type(1){ animation-delay: 0s; }
.ofta-carousel figure.wp-block-image:nth-of-type(2){ animation-delay: 3s; }
.ofta-carousel figure.wp-block-image:nth-of-type(3){ animation-delay: 6s; }
.ofta-carousel figure.wp-block-image:nth-of-type(4){ animation-delay: 9s; }
.ofta-carousel figure.wp-block-image:nth-of-type(5){ animation-delay: 12s; }
.ofta-carousel figure.wp-block-image:nth-of-type(6){ animation-delay: 15s; }
.ofta-carousel figure.wp-block-image:nth-of-type(7){ animation-delay: 18s; }

@keyframes oftaFade{
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  24%  { opacity: 1; }
  32%  { opacity: 0; }
  100% { opacity: 0; }
}


/* ======================
   ROUNDED CAROUSEL ONLY
   (Right image stays clean / no frame)
   ====================== */

/* Carousel gets rounded corners */
.ofta-carousel{
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

/* Carousel images inherit rounding */
.ofta-carousel img{
  border-radius: 20px !important;
}

/* Ensure RIGHT image has no frame */
.ofta-split > .wp-block-column:last-child img{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ======================
   MOBILE
   ====================== */

@media (max-width: 768px){

  .ofta-split{
    flex-direction: column !important;
  }

  .ofta-split > .wp-block-column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .ofta-carousel{
    aspect-ratio: auto;
  }
}


/* ======================
   ACCESSIBILITY
   ====================== */

@media (prefers-reduced-motion: reduce){
  .ofta-carousel figure.wp-block-image{
    animation: none;
    opacity: 1;
  }
}


/* =========================================
   OFTA — MOBILE FIX (override your 35/55 split + fix carousel size)
   ========================================= */
@media (max-width: 768px){

  .ofta-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  /* OVERRIDE your 35% column rule */
  .ofta-split > .wp-block-column:first-child{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* OVERRIDE your 55% column rule */
  .ofta-split > .wp-block-column:last-child{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Fix the carousel being tiny/collapsing */
  .ofta-carousel{
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;   /* don't let it go 'auto' */
    min-height: 340px !important;     /* safety net */
  }

  .ofta-carousel figure.wp-block-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* ===============================
   ManifestU (page-id-931) — shrink ANY .gif on desktop
   (wins against your global 100% image rules)
   =============================== */
@media (min-width: 1024px) {

  /* shrink the image itself */
  body.page-id-931 main .entry-content.wp-block-post-content img[src*=".gif"]{
    width: 40% !important;
    max-width: 40% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* also shrink the WP image block wrapper if it exists */
  body.page-id-931 main .entry-content.wp-block-post-content img[src*=".gif"]
  :is(figure.wp-block-image, .wp-block-image){
    width: 50% !important;
    max-width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===============================
   AMBITIOUS (page-id-928)
   Hide RIGHT column on mobile only
   =============================== */
@media (max-width: 768px) {

  body.page-id-928 .wp-block-columns > .wp-block-column:last-child {
    display: none !important;
  }

  /* Make left column full width */
  body.page-id-928 .wp-block-columns > .wp-block-column:first-child {

    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

}


@media (min-width: 1024px) {

  /* shrink the image itself */
  body.page-id-925 main .entry-content.wp-block-post-content img[src*=".gif"]{
    width: 25% !important;
    max-width: 25% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* also shrink the WP image block wrapper if it exists */
  body.page-id-925 main .entry-content.wp-block-post-content img[src*=".gif"]
  :is(figure.wp-block-image, .wp-block-image){
    width: 50% !important;
    max-width: 25% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
   PROJECT PAGES — KEEP LOGO TOP SPACE + 25PX TO FIRST IMAGE
   ========================================= */

/* Keep 25px above the logo/nav and 25px below it (to first image) */
body:not(.home) .subpage-nav {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

/* Remove Gutenberg vertical spacing between blocks */
body:not(.home) main .wp-block-post-content > * + * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Remove default margins on image blocks */
body:not(.home) main .wp-block-post-content figure.wp-block-image {
  margin: 0 !important;
  line-height: 0 !important;
}

/* Ensure images themselves have no spacing */
body:not(.home) main .wp-block-post-content figure.wp-block-image img {
  display: block !important;
  margin: 0 !important;
}

body:not(.home) main { padding-top: 25px !important; }

/* =========================================
   SUBPAGES — H6 LINK HOVER + 5PX SPACING
   ========================================= */

/* Target only subpages (not homepage) */
body:not(.home) .wp-block-column h6 a {
  text-decoration: none !important;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Hover: fade text only */
body:not(.home) .wp-block-column h6 a:hover {
  opacity: 0.5;
}

/* Add 5px space between H6 and following image */
body:not(.home) .wp-block-column h6 {
  margin-bottom: 30px !important;
}

body:not(.home) .wp-block-column h6 { margin-top: 13px !important; }

/* 20px gap above the Paragraph block that contains the # back-to-top link */
body:not(.home) main .wp-block-post-content p:has(a[href="#"]) {
padding-top: 22px !important;
}


/* CONTACT badge — restore Gutenberg aligncenter centering */
body:not(.home) main .wp-block-post-content figure.wp-block-image.contact-badge.aligncenter {
margin-left: auto !important;
margin-right: auto !important;
}

/* (optional but safe) if any rule is forcing img margins */
body:not(.home) main .wp-block-post-content figure.wp-block-image.contact-badge.aligncenter img {
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}


/* Subpage back links (Events / Art Direction / Ecosystems) */
body:not(.home) .back-link {
text-align: center;
display: inline-block;
margin: 4rem 0 2rem;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
color: #000;
opacity: 0.2;
transition: opacity 0.3s ease;
}

body:not(.home) .back-link:hover {
opacity: 1;
}

/* ==========================================================
FORCE spacing above Back Links (bypasses global margin reset)
========================================================== */

/* Add space ABOVE the first back-link */
body:not(.home) main .wp-block-post-content p.back-link:first-of-type {
padding-top: 2rem !important;  /* same visual gap as Back to Top */
}

/* Add space BELOW each link */
body:not(.home) main .wp-block-post-content p.back-link {
text-align: center;
margin: 0 !important;  /* neutralize margin system */
padding-bottom: 2rem !important;
}

/* Match Back to Top styling */
body:not(.home) main .wp-block-post-content p.back-link a {
display: inline-block;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
color: #