/* ================================================================
   BYDURAN — BENTO LAYOUT
   Every major section floats as an inset rounded rectangle.
   Body background = grout between blocks.
   Margin: 20px — Radius: 24px (nav: 16px)
   ================================================================ */

/* ── Grout background ── */
body {
  background: var(--sand-light) !important;
}

/* ── Cookie banner — replace translateY animation with bottom transition ── */
.cookie-banner {
  position: fixed !important;
  bottom: -200px !important;  /* hidden: fully off screen */
  left: 20px !important;
  right: 20px !important;
  top: auto !important;
  margin: 0 !important;
  border-radius: 16px !important;
  z-index: 99999 !important;
  transform: none !important;
  transition: bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.cookie-banner.is-visible {
  bottom: 20px !important;
  transform: none !important;
}

/* ── Nav — starts at top of page, sticks at viewport top on scroll ── */
/* Top corners flat so it sits flush to viewport when sticky */
.nav {
  margin: 20px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Inner pages: all corners rounded when at very top of page */
.nav--at-top {
  border-radius: 16px;
}

/* Mobile menu joins nav flush below */
.nav__mobile {
  margin: 0 20px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* ── Hero outer wrapper — nav is 80px fixed + 20px top margin + 20px bottom = 120px total; target top = 20px → negative = -100px ── */
.hero-bento {
  margin: -100px 20px 20px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Hero fills viewport minus nav + margins */
.hero {
  height: calc(100dvh - 100px) !important;
  min-height: 500px !important;
  max-height: 940px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ── Selected Work (Novaelle) ── */
.novaelle {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── About Teaser ── */
.about-teaser {
  margin: 20px;
  border-radius: 24px;
  overflow: visible;
}

/* ── Categories dark grid ── */
.categories {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Showreel ── */
.showreel {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Journal strip ── */
.journal-strip {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Newsletter + Footer — joined bento block ── */
.newsletter {
  margin: 20px 20px 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

/* Footer standalone (no newsletter above) */
.footer {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* Hide decorative script watermark — removed from index, hidden everywhere else */
.footer__script-name {
  display: none !important;
}

/* When newsletter directly precedes footer, keep them joined */
.newsletter + .footer {
  margin-top: 0;
  border-radius: 0 0 24px 24px;
}

/* ── About page ── */
.about-hero,
.about-manifesto,
.about-process,
.about-closing {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* About hero — fills viewport within bento layout; nav is a separate block above */
.about-hero {
  min-height: unset;
  height: calc(100dvh - 160px);
  padding-top: var(--sp-16);
}

/* Constrain portrait height so it sits within the hero block on all screen sizes */
.about-hero__portrait img {
  max-height: min(calc(100dvh - 280px), 580px);
  width: auto;
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

/* ── Blog index ── */
.blog-hero,
.blog-featured,
.blog-grid-section {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Blog post ── */
.post-hero,
.post-body,
.post-related {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Portfolio ── */
.portfolio-hero {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}
.portfolio-section {
  margin: 20px;
  border-radius: 24px;
  overflow: visible;
}

/* ── Work with us ── */
.ww-hero,
.ww-deliverables,
.ww-collabs {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ww-hero fills viewport like about-hero; columns stretch to fill full block */
.ww-hero {
  min-height: unset;
  height: calc(100dvh - 160px);
  padding-top: 0;
  align-items: stretch;
}

/* Left column: rounded on the right edge (outer left corners clipped by parent) */
.ww-hero__left {
  border-radius: 0 24px 24px 0;
}

/* Right column: rounded on the left edge (outer right corners clipped by parent) */
.ww-hero__right {
  border-radius: 24px 0 0 24px;
}

/* ww-hero CTA button */
.ww-hero__cta {
  border-radius: 16px !important;
}

/* Hide decorative vertical line — not needed in bento layout */
.ww-hero__line {
  display: none;
}

/* Contact section — two separate bento blocks side by side */
.contact-page {
  margin: 20px;
  display: flex !important;
  height: calc(100dvh - 160px);
  min-height: unset;
  gap: 20px;
  overflow: visible;
  border-radius: 0;
}

/* Left: full bento block (all 4 corners rounded) */
.contact-left {
  flex: 1;
  min-height: 0;
  padding-top: 0 !important;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Tighten left inner padding + gap */
.contact-page .contact-left__inner {
  flex: 1;
  min-height: 0;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--gutter);
}

/* Scale down heading to fit in constrained height */
.contact-page .contact-left__heading {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.2;
}

/* Hide decorative image — not needed in fixed-height viewport block */
.contact-page .contact-left__img {
  display: none;
}

/* Right: full bento block (all 4 corners rounded) */
.contact-right {
  flex: 1.2;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  padding-top: 0 !important;
}

/* Right inner fills the column */
.contact-page .contact-right__inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--gutter);
  max-width: 100%;
}

/* Form is the flex child that distributes space */
.contact-page .contact-form {
  flex: 1;
  min-height: 0;
  gap: var(--sp-3);
}

/* Message group grows to fill remaining form height */
.contact-page .form-group:has(.form-textarea) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Textarea fills its group, no resize handle needed */
.contact-page .form-textarea {
  flex: 1 !important;
  min-height: 60px !important;
  resize: none !important;
}

/* Mobile: stacked, touching (no gap between blocks) */
@media (max-width: 900px) {
  .contact-page {
    height: auto;
    flex-direction: column;
    gap: 0;
    margin: 20px;
  }

  .contact-left {
    border-radius: 24px 24px 0 0;
    min-height: unset;
  }

  .contact-right {
    border-radius: 0 0 24px 24px;
    overflow: visible;
    min-height: unset;
  }

  .contact-page .contact-right__inner {
    flex: unset;
  }

  .contact-page .contact-form {
    flex: unset;
    gap: var(--sp-5);
  }

  .contact-page .form-group:has(.form-textarea) {
    flex: unset;
  }

  .contact-page .form-textarea {
    min-height: 120px !important;
    resize: vertical !important;
    flex: unset !important;
  }
}

/* ── ww-hero stacked (≤900px) ── */
@media (max-width: 900px) {
  .ww-hero {
    height: auto;
    min-height: unset;
  }

  /* Reset inner radius — parent overflow:hidden handles outer corners when stacked */
  .ww-hero__left {
    border-radius: 0 0 24px 24px;
  }

  .ww-hero__right {
    border-radius: 24px 24px 0 0;
  }
}

/* ── Legal pages ── */
.legal-hero {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}
.legal-wrap {
  margin: 20px;
  border-radius: 24px;
  overflow: visible;
}

/* ── 404 page ── */
.notfound-page {
  margin: 20px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Scroll to top ── */
.scroll-top {
  right: 32px;
  bottom: 32px;
}

/* ================================================================
   ROUNDED ELEMENTS — 16px radius on all image wrappers + cards
   ================================================================ */

/* Novaelle grid images */
.novaelle__img-wrap {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Category cards */
.category-card {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Journal card images */
.journal-card__img-wrap {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Blog featured card + grid card images */
.blog-featured-card__media,
.blog-card__img-wrap {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Work-with-us stat cards */
.ww-stat-card {
  border-radius: 16px !important;
}

/* Contact form inputs, selects, textareas */
.form-input {
  border-radius: 16px !important;
}

/* About teaser collage images */
.about-teaser__img {
  border-radius: 16px !important;
  overflow: hidden;
}

/* About hero portrait */
.about-hero__portrait img {
  border-radius: 16px !important;
}

/* About hero decorative frame */
.about-hero__frame {
  border-radius: 16px !important;
}

/* Portfolio masonry images */
.masonry-item__media {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Showreel video */
.showreel__video-container,
.showreel__embed {
  border-radius: 16px !important;
  overflow: hidden;
}

/* ================================================================
   BUTTONS — 16px radius on all button types
   ================================================================ */
.btn,
.btn--solid,
.btn--outline,
.btn--outline-light,
button.btn {
  border-radius: 16px !important;
}

/* ── Newsletter input field ── */
.newsletter__input {
  border-radius: 16px !important;
}

/* ── Cookie banner buttons ── */
.cookie-banner__accept,
.cookie-banner__decline {
  border-radius: 12px !important;
}

/* ================================================================
   ABOUT HERO — Full-bleed portrait for mobile portrait + landscape
   ================================================================ */
@media (max-width: 900px) {

  .about-hero {
    height: auto;
    min-height: calc(100dvh - 110px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    flex-direction: column;
    align-items: stretch;
  }

  .about-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-inline: 0;
    align-items: stretch;
  }

  .about-hero__portrait {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
    flex-shrink: 0;
  }

  .about-hero__portrait img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 55vh;
    aspect-ratio: unset !important;
    object-fit: cover;
    display: block;
    margin-inline: 0;
  }

  .about-hero__frame {
    display: none;
  }

  .about-hero__text {
    padding: var(--sp-8) var(--gutter) var(--sp-10);
  }
}

/* ================================================================
   MOBILE — Tighter margins on small screens
   ================================================================ */
@media (max-width: 767px) {

  .cookie-banner.is-visible {
    bottom: 12px !important;
  }
  .cookie-banner {
    left: 8px !important;
    right: 8px !important;
    border-radius: 14px !important;
  }

  .nav {
    margin: 8px;
    border-radius: 0 0 14px 14px;
    top: 0;
  }

  .nav--at-top {
    border-radius: 14px;
  }

  .nav__mobile {
    margin: 0 8px;
    border-radius: 0 0 14px 14px;
  }

  .hero-bento {
    margin: -72px 8px 8px;
    border-radius: 18px;
  }

  .hero {
    height: calc(100dvh - 80px) !important;
    min-height: 480px !important;
  }

  .novaelle,
  .about-teaser,
  .categories,
  .showreel,
  .journal-strip {
    margin: 8px;
    border-radius: 18px;
  }

  .newsletter {
    margin: 8px 8px 0;
    border-radius: 18px 18px 0 0;
  }

  .footer {
    margin: 8px;
    border-radius: 18px;
  }

  .newsletter + .footer {
    margin-top: 0;
    border-radius: 0 0 18px 18px;
  }

  .ww-hero {
    height: auto;
    min-height: unset;
    padding-top: 0;
    align-items: stretch;
  }

  .about-hero,
  .about-manifesto,
  .about-process,
  .about-closing,
  .blog-hero,
  .blog-featured,
  .blog-grid-section,
  .post-hero,
  .post-body,
  .post-related,
  .portfolio-hero,
  .portfolio-section,
  .ww-hero,
  .ww-deliverables,
  .ww-collabs,
  .legal-hero,
  .legal-wrap,
  .notfound-page {
    margin: 8px;
    border-radius: 18px;
  }

  /* Contact: tighter outer margin, children touch (no gap) */
  .contact-page {
    margin: 8px;
    gap: 0;
    border-radius: 0;
  }

  .contact-left {
    border-radius: 18px 18px 0 0;
  }

  .contact-right {
    border-radius: 0 0 18px 18px;
  }
}

/* ── Index page — tighter bento box padding ── */
.page-home {
  --section-v: clamp(3rem, 6vw, 6rem);
}

.page-home .newsletter {
  padding-block: clamp(2rem, 4vw, 4rem);
}