/* =========================================================
   Mizunara Studio Design System
   Timeline Component
   Version 1.3

   Editorial Alternating Timeline
   Boda Luxury 01
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.ms-timeline {
  position: relative;

  padding-block:
    clamp(
      4.5rem,
      8vw,
      7rem
    );
}


/* =========================================================
   HEADER
========================================================= */

.ms-timeline-header {
  max-width:
    760px;

  margin:
    0
    auto
    clamp(
      3rem,
      5vw,
      4rem
    );

  text-align:
    center;
}


/* =========================================================
   WRAPPER
========================================================= */

.ms-timeline-wrapper {
  position: relative;

  display: flex;

  flex-direction:
    column;

  gap:
    clamp(
      2.8rem,
      6vw,
      4.8rem
    );

  width:
    min(
      92%,
      1000px
    );

  margin:
    0
    auto;
}


/* =========================================================
   LÍNEA CENTRAL
========================================================= */

.ms-timeline-wrapper::before {
  content: "";

  position: absolute;

  top:
    0;

  bottom:
    0;

  left:
    50%;

  width:
    3px;

  transform:
    translateX(-50%);

  border-radius:
    999px;

  background:
    linear-gradient(
      180deg,
      rgba(
        200,
        164,
        107,
        0.18
      ),
      var(
        --ms-color-primary
      ) 16%,
      var(
        --ms-color-primary
      ) 84%,
      rgba(
        200,
        164,
        107,
        0.18
      )
    );

  pointer-events:
    none;
}


/* =========================================================
   ITEM
========================================================= */

.ms-timeline-item {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    22px
    minmax(
      0,
      1fr
    );

  column-gap:
    clamp(
      1.5rem,
      3vw,
      2.75rem
    );

  align-items:
    center;

  width:
    100%;

  opacity:
    0;

  transform:
    translateY(
      40px
    );

  transition:
    opacity
      0.7s
      ease,
    transform
      0.7s
      ease;

  transition-delay:
    var(
      --item-delay
    );
}


.ms-timeline-item.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}


/* =========================================================
   ALTERNANCIA

   Impares:
   tarjeta derecha.

   Pares:
   tarjeta izquierda.
========================================================= */

.ms-timeline-item:nth-child(odd)
.ms-timeline-card {
  grid-column:
    3;
}


.ms-timeline-item:nth-child(even)
.ms-timeline-card {
  grid-column:
    1;

  text-align:
    right;
}


/* =========================================================
   DOT
========================================================= */

.ms-timeline-dot {
  position: relative;

  z-index:
    3;

  grid-column:
    2;

  grid-row:
    1;

  justify-self:
    center;

  width:
    22px;

  height:
    22px;

  margin:
    0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.65
    );

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #ead6aa,
      var(
        --ms-color-primary
      ),
      #a77d39
    );

  box-shadow:
    0 0 0 6px
      rgba(
        200,
        164,
        107,
        0.1
      ),
    0 8px 24px
      rgba(
        126,
        91,
        42,
        0.18
      );
}


/* =========================================================
   CONECTORES HORIZONTALES
========================================================= */

.ms-timeline-item::before {
  content: "";

  position: absolute;

  top:
    50%;

  width:
    clamp(
      1rem,
      2.5vw,
      2rem
    );

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(
        200,
        164,
        107,
        0.16
      ),
      rgba(
        200,
        164,
        107,
        0.72
      )
    );

  pointer-events:
    none;
}


/* Tarjeta a la derecha */

.ms-timeline-item:nth-child(odd)::before {
  left:
    calc(
      50% + 11px
    );
}


/* Tarjeta a la izquierda */

.ms-timeline-item:nth-child(even)::before {
  right:
    calc(
      50% + 11px
    );

  transform:
    scaleX(
      -1
    );
}


/* =========================================================
   CARD
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-timeline-card {
  position:
    relative;

  min-width:
    0;

  padding:
    clamp(
      1.55rem,
      3vw,
      1.9rem
    );

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.22
    );

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.8
      ),
      rgba(
        255,
        252,
        247,
        0.55
      )
    );

  box-shadow:
    0 22px 58px
      rgba(
        67,
        48,
        28,
        0.1
      ),
    0 7px 22px
      rgba(
        67,
        48,
        28,
        0.05
      ),
    inset
      0
      1px
      0
      rgba(
        255,
        255,
        255,
        0.76
      );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  transition:
    transform
      0.35s
      ease,
    box-shadow
      0.35s
      ease,
    border-color
      0.35s
      ease;
}


.ms-timeline-card:hover {
  transform:
    translateY(
      -6px
    );

  border-color:
    rgba(
      200,
      164,
      107,
      0.4
    );

  box-shadow:
    0 30px 74px
      rgba(
        67,
        48,
        28,
        0.14
      ),
    0 10px 28px
      rgba(
        67,
        48,
        28,
        0.07
      ),
    inset
      0
      1px
      0
      rgba(
        255,
        255,
        255,
        0.82
      );
}


/* =========================================================
   TIME
========================================================= */

.ms-timeline-time {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    fit-content;

  margin-bottom:
    0.8rem;

  padding:
    0.35rem
    0.9rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.16
    );

  border-radius:
    999px;

  background:
    rgba(
      200,
      164,
      107,
      0.09
    );

  color:
    var(
      --ms-color-primary-dark,
      #8f6d35
    );

  font-size:
    0.85rem;

  font-weight:
    600;

  line-height:
    1.2;
}


/* =========================================================
   ICON
========================================================= */

.ms-timeline-icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  margin-bottom:
    0.75rem;

  color:
    var(
      --ms-color-primary
    );
}


.ms-timeline-icon svg {
  display:
    block;

  width:
    30px;

  height:
    30px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.35;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  opacity:
    0.95;
}


/* =========================================================
   ALINEACIÓN DE TARJETAS IZQUIERDAS
========================================================= */

.ms-timeline-item:nth-child(even)
.ms-timeline-time,

.ms-timeline-item:nth-child(even)
.ms-timeline-icon {
  margin-left:
    auto;
}


/* =========================================================
   TEXT
========================================================= */

.ms-timeline-item-title {
  margin:
    0
    0
    0.5rem;

  color:
    var(
      --ms-color-text
    );

  font-family:
    var(
      --ms-font-title
    );

  font-size:
    clamp(
      1.3rem,
      2.2vw,
      1.55rem
    );

  font-weight:
    500;

  line-height:
    1.2;
}


.ms-timeline-item-description {
  margin:
    0;

  color:
    var(
      --ms-color-muted
    );

  line-height:
    1.8;
}


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

   Desde 768px hacia abajo:
   - línea a la izquierda
   - una sola columna
   - tarjetas alineadas a la izquierda
========================================================= */

@media (max-width: 768px) {

  .ms-timeline {
    padding-block:
      clamp(
        4rem,
        9vw,
        5.5rem
      );
  }


  .ms-timeline-header {
    margin-bottom:
      3rem;
  }


  .ms-timeline-wrapper {
    width:
      min(
        90%,
        620px
      );

    gap:
      2.2rem;
  }


  .ms-timeline-wrapper::before {
    left:
      18px;

    transform:
      none;

    width:
      2px;
  }


  .ms-timeline-item {
    display:
      flex;

    align-items:
      flex-start;

    gap:
      1.25rem;

    padding-left:
      0;
  }


  .ms-timeline-item::before {
    display:
      none;
  }


  .ms-timeline-dot {
    position:
      relative;

    flex:
      0 0 auto;

    width:
      18px;

    height:
      18px;

    margin-top:
      1.45rem;

    box-shadow:
      0 0 0 5px
        rgba(
          200,
          164,
          107,
          0.1
        ),
      0 6px 18px
        rgba(
          126,
          91,
          42,
          0.16
        );
  }


  .ms-timeline-card,
  .ms-timeline-item:nth-child(odd)
  .ms-timeline-card,
  .ms-timeline-item:nth-child(even)
  .ms-timeline-card {
    flex:
      1;

    width:
      auto;

    text-align:
      left;
  }


  .ms-timeline-item:nth-child(even)
  .ms-timeline-time,

  .ms-timeline-item:nth-child(even)
  .ms-timeline-icon {
    margin-left:
      0;
  }


  .ms-timeline-card {
    padding:
      1.4rem;
  }


  .ms-timeline-time {
    margin-bottom:
      0.7rem;
  }


  .ms-timeline-icon {
    width:
      32px;

    height:
      32px;

    margin-bottom:
      0.7rem;
  }


  .ms-timeline-icon svg {
    width:
      28px;

    height:
      28px;
  }


  .ms-timeline-item-title {
    font-size:
      1.25rem;
  }

}


/* =========================================================
   TELÉFONOS
========================================================= */

@media (max-width: 480px) {

  .ms-timeline {
    padding-block:
      4rem;
  }


  .ms-timeline-wrapper {
    width:
      92%;

    gap:
      1.8rem;
  }


  .ms-timeline-wrapper::before {
    left:
      15px;
  }


  .ms-timeline-item {
    gap:
      1rem;
  }


  .ms-timeline-dot {
    width:
      16px;

    height:
      16px;

    margin-top:
      1.35rem;
  }


  .ms-timeline-card {
    padding:
      1.2rem;

    border-radius:
      20px;
  }


  .ms-timeline-time {
    margin-bottom:
      0.65rem;

    font-size:
      0.8rem;
  }


  .ms-timeline-icon {
    width:
      32px;

    height:
      32px;

    margin-bottom:
      0.65rem;
  }


  .ms-timeline-icon svg {
    width:
      29px;

    height:
      29px;
  }


  .ms-timeline-item-description {
    line-height:
      1.7;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .ms-timeline-item,
  .ms-timeline-card {
    animation:
      none !important;

    transition:
      none !important;
  }


  .ms-timeline-item {
    opacity:
      1;

    transform:
      none;
  }


  .ms-timeline-card {
    transform:
      none;
  }

}