/* ==========================================================================
   UNTERRO - EDITORIAL TERMS OF USE COMPONENT STYLES
   ========================================================================== */

.terms-of-use-page {
  padding: 0;
  margin: 0;
  background-color: var(--color-bg-primary);
}

/* --------------------------------------------------------------------------
   1. Section Container & Background (Aligned with Header)
   -------------------------------------------------------------------------- */
.terms-editorial {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-primary);
  padding-top: clamp(200px, 28vh, 270px);
  padding-bottom: clamp(90px, 12vh, 130px);
  box-sizing: border-box;
}

/* Uses theme-standard .container-align-header: matches floating capsule padding & margins */
.terms-editorial__container {
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Pinned Stationary Bar: TERMS OF USE (Left 50%) & Tagline (Right 50%)
      Sticky inside .terms-editorial: stays locked in view while reading,
      and naturally STOPS at the bottom of the section before the footer!
   -------------------------------------------------------------------------- */
.terms-editorial__pinned-bar {
  position: -webkit-sticky;
  position: sticky;
  top: clamp(200px, 28vh, 270px); /* Lowered down from header for generous luxury clearance */
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none; /* Allows user to interact/scroll through transparent areas */
  margin-bottom: 0;
  background: transparent;
  padding: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.terms-editorial__header-row {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Left 50% Column */
.terms-editorial__header-col-left {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  align-items: stretch;
  gap: var(--space-sm, 16px);
  box-sizing: border-box;
  pointer-events: auto;
}

/* Orange Vertical Line (Patti) - Exactly matching Packing Guide "How we ship ?" */
.terms-editorial__accent-bar {
  flex: 0 0 8px;
  width: 8px;
  align-self: stretch;
  background-color: var(--color-accent, #AD622F);
  border-radius: 0;
  display: block;
  flex-shrink: 0;
}

/* Heading: "TERMS OF USE" */
.terms-editorial__title {
  font-family: var(--font-family-sans);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: #1a1816;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

/* Right 50% Column */
.terms-editorial__header-col-right {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  pointer-events: auto;
}

.terms-editorial__tagline {
  font-family: var(--font-family-sans);
  font-size: clamp(11px, 10px + 0.16vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.32em; /* Set to .32 as requested */
  text-transform: uppercase;
  color: #1a1816;
  line-height: 1.7;
  display: inline-block;
  text-align: left;
}

/* --------------------------------------------------------------------------
   3. Scrolling Numbered Articles Stream (Left 50% / Right 50% Grid Split)
   -------------------------------------------------------------------------- */
.terms-editorial__stream {
  width: 100%;
  position: relative;
  padding-top: 40px; /* Set to 40px as requested */
  box-sizing: border-box;
}

.terms-editorial__item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.terms-editorial__item-inner {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-bottom: clamp(85px, 11vh, 135px); /* Airy editorial section gaps like FAQ */
  box-sizing: border-box;
}

/* Left 50% Column: Number 01, 02, etc. at the far left */
.terms-editorial__num-col {
  flex: 0 0 50%;
  width: 50%;
  box-sizing: border-box;
}

.terms-editorial__num {
  font-family: "Cormorant Garamond", var(--font-family-serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.2rem, 1.1rem + 0.25vw, 1.45rem);
  color: #AD622F; /* Rich burnt amber / cognac accent */
  line-height: 1.25;
  display: inline-block;
  user-select: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Right 50% Column: Starts EXACTLY at 50% of the container! */
.terms-editorial__body-col {
  flex: 0 0 50%;
  width: 50%;
  max-width: 640px; /* Constrained reading measure for optimal luxury readability */
  box-sizing: border-box;
  padding-right: clamp(15px, 3.5vw, 50px);
}

/* Article Sub-Heading */
.terms-editorial__section-title {
  font-family: var(--font-family-sans);
  font-size: clamp(12px, 11.5px + 0.12vw, 13.8px);
  font-weight: 500;
  letter-spacing: 0.32em; /* Set to .32 as requested */
  text-transform: uppercase;
  color: #1a1816;
  margin: 0 0 16px 0; /* Margin reduced from 18px to 16px as requested */
  line-height: 1.35;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Body Text - Refined editorial typography */
.terms-editorial__text {
  font-family: var(--font-family-sans);
  font-size: clamp(13px, 12.5px + 0.1vw, 14.2px); /* Slightly reduced font size */
  font-weight: 400;
  line-height: 1.68; /* Slightly reduced line height from 1.8 */
  color: var(--color-text-secondary, #433f3c);
  letter-spacing: 0.01em;
}

.terms-editorial__text p {
  margin: 0 0 15px 0;
}

.terms-editorial__text p:last-child {
  margin-bottom: 0;
}

.terms-editorial__text strong {
  font-weight: 600;
  color: #1a1816;
}

.terms-editorial__list {
  list-style: disc;
  list-style-position: outside;
  padding-left: 15px;
  margin: 16px 0;
  box-sizing: border-box;
}

.terms-editorial__list li {
  margin-bottom: 10px;
  line-height: 1.75;
  color: var(--color-text-secondary, #433f3c);
}

.terms-editorial__list li:last-child {
  margin-bottom: 0;
}

/* Hairline Border Divider between items */
.terms-editorial__item-divider {
  width: 100%;
  height: 0.5px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: clamp(40px, 5vh, 56px);
  transform-origin: left center;
}

/* Ensure no trailing divider after final section */
.terms-editorial__item:last-child .terms-editorial__item-divider {
  display: none !important;
}

.terms-editorial__item:last-child .terms-editorial__item-inner {
  padding-bottom: clamp(90px, 12vh, 140px);
}

/* --------------------------------------------------------------------------
   4. Desktop Screen Size Optimizations (1024px, 1440px, 1920px)
   -------------------------------------------------------------------------- */

/* Standard Desktop / Laptop (1024px – 1439px) */
@media (min-width: 1024px) {
  .terms-editorial {
    padding-top: clamp(210px, 28vh, 270px);
  }

  .terms-editorial__pinned-bar {
    top: clamp(210px, 28vh, 270px);
  }

  .terms-editorial__stream {
    padding-top: 40px;
  }

  .terms-editorial__body-col {
    max-width: 600px;
  }
}

/* Large Desktop Screens (1440px – 1919px) */
@media (min-width: 1440px) {
  .terms-editorial {
    padding-top: clamp(240px, 29vh, 310px); /* Lowered for 82px floating header */
  }

  .terms-editorial__pinned-bar {
    top: clamp(240px, 29vh, 310px);
  }

  .terms-editorial__title {
    font-size: clamp(3.0rem, 2.6rem + 0.8vw, 3.8rem);
  }

  .terms-editorial__tagline {
    font-size: 14.5px;
    letter-spacing: 0.32em;
    line-height: 1.7;
  }

  .terms-editorial__stream {
    padding-top: 46px;
  }

  .terms-editorial__num {
    font-size: 1.45rem;
  }

  .terms-editorial__body-col {
    max-width: 700px;
  }

  .terms-editorial__section-title {
    font-size: 16px;
    letter-spacing: 0.32em;
    margin-bottom: 20px;
  }

  .terms-editorial__text {
    font-size: 16px;
    line-height: 1.8;
  }

  .terms-editorial__item-inner {
    padding-bottom: clamp(95px, 12vh, 145px);
  }
}

/* Ultra-Wide & 4K Screens (>= 1920px) */
@media (min-width: 1920px) {
  .terms-editorial {
    padding-top: clamp(280px, 31vh, 370px); /* Lowered for 94px floating header */
  }

  .terms-editorial__pinned-bar {
    top: clamp(280px, 31vh, 370px);
  }

  .terms-editorial__title {
    font-size: 4.2rem;
  }

  .terms-editorial__tagline {
    font-size: 16.5px;
    letter-spacing: 0.32em;
    line-height: 1.75;
  }

  .terms-editorial__stream {
    padding-top: 52px;
  }

  .terms-editorial__num {
    font-size: 1.65rem;
  }

  .terms-editorial__body-col {
    max-width: 820px;
  }

  .terms-editorial__section-title {
    font-size: 18px;
    letter-spacing: 0.32em;
    margin-bottom: 24px;
  }

  .terms-editorial__text {
    font-size: 17.5px;
    line-height: 1.82;
  }

  .terms-editorial__item-inner {
    padding-bottom: clamp(110px, 14vh, 165px);
  }
}

/* --------------------------------------------------------------------------
   5. Tablet & Mobile Responsive Fallbacks
   -------------------------------------------------------------------------- */
/* Tablets (< 1024px) */
@media (max-width: 1023px) {
  .terms-editorial {
    padding-top: clamp(130px, 18vh, 180px);
    padding-bottom: 70px;
  }

  .terms-editorial__pinned-bar {
    top: clamp(130px, 18vh, 180px);
  }

  .terms-editorial__stream {
    padding-top: 32px;
  }

  .terms-editorial__header-col-left,
  .terms-editorial__header-left,
  .terms-editorial__num-col {
    flex: 0 0 45%;
    width: 45%;
  }

  .terms-editorial__header-col-right,
  .terms-editorial__header-right,
  .terms-editorial__body-col {
    flex: 0 0 55%;
    width: 55%;
  }
}

/* Small Tablets & Mobile Devices (< 768px) */
@media (max-width: 767px) {
  .terms-editorial {
    padding-top: clamp(75px, 12vh, 95px);
    padding-bottom: 50px;
  }

  .terms-editorial__pinned-bar {
    top: clamp(75px, 12vh, 95px);
    background: transparent;
    padding: 0;
    margin-bottom: 0;
  }

  .terms-editorial__stream {
    padding-top: clamp(20px, 3vh, 30px);
  }

  .terms-editorial__header-row {
    gap: 12px;
  }

  .terms-editorial__header-col-left,
  .terms-editorial__header-left {
    flex: 1;
    width: auto;
    gap: 10px;
  }

  .terms-editorial__title {
    font-size: clamp(1.3rem, 4.5vw, 1.75rem);
  }

  .terms-editorial__accent-bar {
    width: 8px;
    flex: 0 0 8px;
  }

  .terms-editorial__header-col-right,
  .terms-editorial__header-right {
    flex: none;
    width: auto;
  }

  .terms-editorial__tagline {
    font-size: clamp(8px, 2.2vw, 10px);
    letter-spacing: 0.14em;
    line-height: 1.45;
  }

  .terms-editorial__item-inner {
    gap: 16px;
    padding-bottom: 40px;
  }

  .terms-editorial__num-col {
    flex: 0 0 34px;
    width: 34px;
  }

  .terms-editorial__num {
    font-size: 1.1rem;
  }

  .terms-editorial__body-col {
    flex: 1;
    width: auto;
    padding-right: 0;
  }

  .terms-editorial__item-divider {
    margin-bottom: 28px;
  }
}

/* Very Small Mobile (< 380px) */
@media (max-width: 379px) {
  .terms-editorial__header-row {
    gap: 8px;
  }

  .terms-editorial__title {
    font-size: 1.15rem;
  }

  .terms-editorial__tagline {
    font-size: 7.5px;
  }
}