/* =============================================================================
   COLLECTIONS MODULE — SOVEREIGN / RAIL-LOCKED / LUXURY MOTION
   - Fully independent from home.css
   - Uses global rail tokens (--site-rail-width / --site-gutter)
   - Uses global motion-init / motion-visible system
   - RTL-aware
============================================================================= */

/* -----------------------------------------------------------------------------
   01) RAIL STRUCTURE (PERFECT ALIGNMENT WITH HERO + FOOTER)
----------------------------------------------------------------------------- */

.featured-section{
  width:100%;
  position:relative;
}

.featured-header,
.featured-grid{
  width:100%;
  max-width:100%;
  margin:0;
  text-align:start;
}

.featured-header{
  margin-block: 0 3.2rem;
}

.featured-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
}

@media (max-width:1100px){
  .featured-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:720px){
  .featured-grid{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   02) CARD SYSTEM — PREMIUM BASELINE
----------------------------------------------------------------------------- */

.featured-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background: var(--surface-color, rgba(255,255,255,0.045));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 1.1s cubic-bezier(0.22,1,0.36,1),
    box-shadow 1.1s cubic-bezier(0.22,1,0.36,1),
    background 0.8s ease;
  text-align:start;
}

.featured-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.08);
}

/* Subtle inner breathing feel */
.featured-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(255,255,255,0.015) 65%,
    transparent 85%
  );
  opacity:0.6;
  pointer-events:none;
}

/* -----------------------------------------------------------------------------
   03) MOTION SYSTEM INTEGRATION (GLOBAL CONTRACT)
----------------------------------------------------------------------------- */

.featured-header.motion-init{
  opacity:0;
  transform: translateY(60px);
}

.featured-header.motion-visible{
  opacity:1;
  transform: translateY(0);
}

.featured-card.motion-init{
  opacity:0;
  transform: translateY(70px);
}

.featured-card.motion-visible{
  opacity:1;
  transform: translateY(0);
}

/* Smooth motion timing */
.featured-header,
.featured-card{
  transition:
    transform 1.4s cubic-bezier(0.22,1,0.36,1),
    opacity 1.2s ease;
}

/* -----------------------------------------------------------------------------
   04) RTL SUPPORT (STRUCTURAL, NOT HACKED)
----------------------------------------------------------------------------- */

html.lang-rtl .featured-header,
html.lang-rtl .featured-grid{
  direction:rtl;
  unicode-bidi:isolate;
  text-align:start;
}

/* -----------------------------------------------------------------------------
   05) VISUAL CONSISTENCY — NO HARD OVERRIDES
----------------------------------------------------------------------------- */

.featured-section h2,
.featured-section h3{
  letter-spacing:0.02em;
}

.featured-section p{
  line-height:1.6;
  opacity:0.9;
}