/* =========================================================
   Mizunara Studio Design System
   layout.css
   Version 1.1

   Component Isolation Pass
========================================================= */


/* ===========================
   Page Layout
=========================== */

.ms-page {
  position: relative;

  min-height: 100vh;

  overflow: hidden;
}


.ms-main {
  position: relative;

  z-index: var(--ms-z-base);
}


/* ===========================
   Section Layout
=========================== */

.ms-section {
  position: relative;

  padding-block:
    var(--ms-section-padding);
}


.ms-section-sm {
  padding-block:
    var(--ms-section-padding-sm);
}


.ms-section-full {
  display: grid;

  place-items: center;

  min-height: 100vh;
}


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

  margin:
    0
    auto
    var(--ms-space-2xl);

  text-align: center;
}


.ms-section-eyebrow {
  display: inline-block;

  margin-bottom:
    var(--ms-space-sm);

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

  font-size:
    var(--ms-text-sm);

  font-weight: 600;

  letter-spacing:
    var(--ms-letter-wide);

  text-transform:
    uppercase;
}


.ms-section-title {
  margin-bottom:
    var(--ms-space-md);
}


.ms-section-text {
  max-width: 620px;

  margin-inline: auto;
}


/* ===========================
   Containers
=========================== */

.ms-container {
  width:
    min(
      92%,
      var(--ms-container-lg)
    );

  margin-inline:
    auto;
}


.ms-container-md {
  width:
    min(
      92%,
      var(--ms-container-md)
    );

  margin-inline:
    auto;
}


.ms-container-sm {
  width:
    min(
      92%,
      var(--ms-container-sm)
    );

  margin-inline:
    auto;
}


/* ===========================
   Stack Layout
=========================== */

.ms-stack {
  display: flex;

  flex-direction: column;

  gap:
    var(--ms-space-lg);
}


.ms-stack-sm {
  gap:
    var(--ms-space-sm);
}


.ms-stack-md {
  gap:
    var(--ms-space-md);
}


.ms-stack-xl {
  gap:
    var(--ms-space-xl);
}


/* ===========================
   Cluster Layout
=========================== */

.ms-cluster {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    var(--ms-space-md);
}


.ms-cluster-center {
  justify-content:
    center;
}


.ms-cluster-between {
  justify-content:
    space-between;
}


/* ===========================
   Grid System
=========================== */

.ms-grid {
  display: grid;

  gap:
    var(--ms-space-xl);
}


.ms-grid-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}


.ms-grid-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


.ms-grid-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );
}


.ms-auto-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          240px,
          100%
        ),
        1fr
      )
    );

  gap:
    var(--ms-space-xl);
}


/* ===========================
   Split Layout
=========================== */

.ms-split {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    var(--ms-space-2xl);

  align-items:
    center;
}


.ms-split-reverse
.ms-split-media {
  order: 2;
}


.ms-split-reverse
.ms-split-content {
  order: 1;
}


.ms-split-content {
  position: relative;
}


.ms-split-media {
  position: relative;
}


/* ===========================
   Hero Layout
=========================== */

.ms-hero {
  display: grid;

  place-items: center;

  min-height: 100vh;

  padding-block:
    var(--ms-space-4xl);

  text-align: center;
}


.ms-hero-inner {
  position: relative;

  z-index: 2;

  width:
    min(
      92%,
      920px
    );

  margin-inline:
    auto;
}


.ms-hero-kicker {
  display: inline-block;

  margin-bottom:
    var(--ms-space-md);

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

  font-size:
    var(--ms-text-sm);

  font-weight: 600;

  letter-spacing:
    var(--ms-letter-wide);

  text-transform:
    uppercase;
}


.ms-hero-title {
  margin-bottom:
    var(--ms-space-md);
}


.ms-hero-subtitle {
  max-width: 680px;

  margin-inline:
    auto;

  margin-bottom:
    var(--ms-space-xl);
}


.ms-hero-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content:
    center;

  gap:
    var(--ms-space-md);
}


/* ===========================
   Bento Grid
=========================== */

.ms-bento {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    var(--ms-space-lg);
}


.ms-bento-item {
  min-height: 220px;
}


.ms-bento-wide {
  grid-column:
    span 2;
}


.ms-bento-tall {
  grid-row:
    span 2;
}


.ms-bento-full {
  grid-column:
    1 / -1;
}


/* ===========================
   Gallery Layout

   Estas reglas corresponden únicamente
   al layout grid genérico.

   El carrusel es controlado por
   css/components/gallery.css.
=========================== */

.ms-gallery-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    var(--ms-space-md);
}


.ms-gallery-item {
  position: relative;

  overflow: hidden;

  border-radius:
    var(--ms-radius-lg);
}


.ms-gallery-item
img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}


.ms-gallery-featured {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


/* ===========================
   Masonry Layout
=========================== */

.ms-masonry {
  columns:
    3 260px;

  column-gap:
    var(--ms-space-md);
}


.ms-masonry-item {
  overflow: hidden;

  margin-bottom:
    var(--ms-space-md);

  border-radius:
    var(--ms-radius-lg);

  break-inside:
    avoid;
}


/* ===========================
   Timeline

   El componente Timeline administra completamente
   su estructura visual desde:

   css/components/timeline.css

   No se definen aquí:
   - línea vertical
   - posición de dots
   - padding de items
   - anchura del Timeline
   - comportamiento responsive

   Esto evita conflictos entre el Layout System
   y el componente independiente.
=========================== */


/* ===========================
   Center Layout
=========================== */

.ms-center {
  display: grid;

  place-items: center;
}


.ms-center-text {
  text-align: center;
}


/* ===========================
   Sticky / Floating Layout
=========================== */

.ms-sticky {
  position: sticky;

  top:
    var(--ms-space-lg);
}


.ms-floating {
  position: fixed;

  z-index:
    var(--ms-z-floating);
}


.ms-floating-bottom-right {
  right:
    var(--ms-space-lg);

  bottom:
    var(--ms-space-lg);
}


.ms-floating-bottom-left {
  left:
    var(--ms-space-lg);

  bottom:
    var(--ms-space-lg);
}


/* ===========================
   Spacing Utilities
=========================== */

.ms-mt-xs {
  margin-top:
    var(--ms-space-xs);
}


.ms-mt-sm {
  margin-top:
    var(--ms-space-sm);
}


.ms-mt-md {
  margin-top:
    var(--ms-space-md);
}


.ms-mt-lg {
  margin-top:
    var(--ms-space-lg);
}


.ms-mt-xl {
  margin-top:
    var(--ms-space-xl);
}


.ms-mt-2xl {
  margin-top:
    var(--ms-space-2xl);
}


.ms-mb-xs {
  margin-bottom:
    var(--ms-space-xs);
}


.ms-mb-sm {
  margin-bottom:
    var(--ms-space-sm);
}


.ms-mb-md {
  margin-bottom:
    var(--ms-space-md);
}


.ms-mb-lg {
  margin-bottom:
    var(--ms-space-lg);
}


.ms-mb-xl {
  margin-bottom:
    var(--ms-space-xl);
}


.ms-mb-2xl {
  margin-bottom:
    var(--ms-space-2xl);
}


.ms-pt-sm {
  padding-top:
    var(--ms-space-sm);
}


.ms-pt-md {
  padding-top:
    var(--ms-space-md);
}


.ms-pt-lg {
  padding-top:
    var(--ms-space-lg);
}


.ms-pt-xl {
  padding-top:
    var(--ms-space-xl);
}


.ms-pb-sm {
  padding-bottom:
    var(--ms-space-sm);
}


.ms-pb-md {
  padding-bottom:
    var(--ms-space-md);
}


.ms-pb-lg {
  padding-bottom:
    var(--ms-space-lg);
}


.ms-pb-xl {
  padding-bottom:
    var(--ms-space-xl);
}


/* ===========================
   Alignment Utilities
=========================== */

.ms-align-start {
  align-items:
    start;
}


.ms-align-center {
  align-items:
    center;
}


.ms-align-end {
  align-items:
    end;
}


.ms-justify-start {
  justify-content:
    start;
}


.ms-justify-center {
  justify-content:
    center;
}


.ms-justify-end {
  justify-content:
    end;
}


.ms-justify-between {
  justify-content:
    space-between;
}


/* ===========================
   Tablet Layout
=========================== */

@media (max-width: 900px) {

  .ms-grid-2,
  .ms-grid-3,
  .ms-grid-4,
  .ms-split {
    grid-template-columns:
      1fr;
  }


  .ms-split-reverse
  .ms-split-media,

  .ms-split-reverse
  .ms-split-content {
    order:
      initial;
  }


  .ms-bento {
    grid-template-columns:
      1fr 1fr;
  }


  .ms-gallery-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .ms-gallery-featured {
    grid-column:
      span 2;
  }

}


/* ===========================
   Mobile Layout
=========================== */

@media (max-width: 600px) {

  .ms-hero {
    min-height:
      92vh;

    padding-block:
      var(--ms-space-3xl);
  }


  .ms-bento {
    grid-template-columns:
      1fr;
  }


  .ms-bento-wide,
  .ms-bento-tall,
  .ms-bento-full {
    grid-column:
      auto;

    grid-row:
      auto;
  }


  .ms-gallery-grid {
    grid-template-columns:
      1fr;
  }


  .ms-gallery-featured {
    grid-column:
      auto;

    grid-row:
      auto;
  }


  .ms-floating-bottom-right {
    right:
      var(--ms-space-md);

    bottom:
      var(--ms-space-md);
  }


  .ms-floating-bottom-left {
    left:
      var(--ms-space-md);

    bottom:
      var(--ms-space-md);
  }

}