/* ============== Liorat Story – Desktop polish ============== */
:root{
  --lr-glass-1: rgba(255,255,255,.82);
  --lr-glass-2: rgba(255,255,255,.70);
  --lr-glass-brd: rgba(17,17,17,.08);
  --lr-text:#111; --lr-dim:#444;
  --lr-radius-lg: 18px; --lr-radius-md: 14px;
  --lr-shadow: 0 24px 64px rgba(0,0,0,.12);
  --lr-max: 1120px;
}

/* Sección y contenedor */
.lr-story{
  margin: 26px auto 80px;
  padding: 0 16px;
}
.lr-story.is-wide{ --lr-max: 1240px; }
.lr-story-inner{
  max-width: var(--lr-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Desktop: 2 columnas balanceadas */
@media (min-width: 960px){
  .lr-story-inner{
    grid-template-columns: 1.05fr .95fr; /* leve protagonismo al media */
    align-items: center;
    gap: 22px;
  }
  .lr-story.is-reverse .lr-story-media{ order: 1; }
  .lr-story.is-reverse .lr-story-card { order: 0; }
}

/* ---------- Media (una o varias imágenes) ---------- */
.lr-story-media{
  position: relative;
}
.lr-story-media img{
  display:block; width:100%;
  border-radius: var(--lr-radius-lg);
  object-fit: cover;
  background:#f6f6f6;
}

/* Placeholder si no hay imagen */
.lr-story-media--placeholder{
  height: clamp(260px, 40vw, 520px);
  border-radius: var(--lr-radius-lg);
  background: linear-gradient(180deg, #fafafa, #f3f3f3);
  border:1px solid var(--lr-glass-brd);
}

/* Galería (hasta 3) con ritmo visual */
.lr-story-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.lr-story-shot{ margin:0; }
.lr-story-shot img{ aspect-ratio: 4 / 5; }

/* Tercera imagen ocupa ancho completo */
.lr-story-gallery .lr-story-shot:nth-child(3){
  grid-column: 1 / -1;
}

/* Hover sutil solo desktop */
@media (hover:hover){
  .lr-story-shot img{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .lr-story-shot img:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,.10);
  }
}

/* ---------- Card (texto) en glass ---------- */
.lr-story-card{
  background: linear-gradient(180deg, var(--lr-glass-1), var(--lr-glass-2));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--lr-glass-brd);
  border-radius: var(--lr-radius-lg);
  box-shadow: var(--lr-shadow);
  padding: clamp(16px, 2.2vw, 24px);
}

.lr-story-kicker{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--lr-dim);
  text-transform: uppercase;
}

.lr-story-title{
  margin: 0 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.15;
  color: var(--lr-text);
}

.lr-story-text{
  margin: 0 0 16px;
  color: #333;
  font-size: clamp(15px, 1.6vw, 16.5px);
}

/* CTA coherente con tu sistema de botones glass */
.lr-story .lr-btn-glass{
  display:inline-flex; align-items:center; justify-content:center;
  height: 46px; padding: 0 16px; border-radius: 14px;
  color: var(--lr-text);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.45));
  border: 1px solid var(--lr-glass-brd);
  box-shadow: 0 10px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.35);
  text-decoration:none; font-weight:600;
  transition: transform .15s ease, box-shadow .2s ease;
}
.lr-story .lr-btn-glass:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
}

/* ---------- Ajustes responsive ---------- */
@media (max-width: 959px){
  .lr-story-gallery{ gap: 10px; }
  .lr-story-card{ border-radius: var(--lr-radius-md); }
  .lr-story-media img{ border-radius: var(--lr-radius-md); }
}

/* Corregir posibles interferencias de temas (centrado real) */
.lr-story,
.lr-story-inner,
.lr-story-media,
.lr-story-card{ box-sizing: border-box; }

/* ---------- Media (contenedor con bordes redondeados) ---------- */
.lr-story-media{
  position: relative;
  border-radius: var(--lr-radius-lg); /* ahora el contenedor también tiene esquinas */
  overflow: hidden;                  /* asegura que las imágenes respeten el borde */
  background: #f6f6f6;               /* fallback */
  box-shadow: var(--lr-shadow);      /* opcional, para armonizar con la tarjeta de texto */
  border: 1px solid var(--lr-glass-brd);
}

/* Las imágenes ya no necesitan su propio border-radius, heredan del contenedor */
.lr-story-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
  border-radius: 0; /* reset porque el contenedor ya redondea */
}