Grid

<gstock-grid type="fluid">
  <div span="12" class="item-12">
    <div class="content">span="12" - Debería ocupar 12 columnas (ancho completo)</div>
  </div>

  <div span="6" class="item-6">
    <div class="content">span="6" - Primera mitad</div>
  </div>

  <div span="6" class="item-6">
    <div class="content">span="6" - Segunda mitad</div>
  </div>

  <div span="4" class="item-4">
    <div class="content">span="4" - Primer tercio</div>
  </div>

  <div span="4" class="item-4">
    <div class="content">span="4" - Segundo tercio</div>
  </div>

  <div span="4" class="item-4">
    <div class="content">span="4" - Tercer tercio</div>
  </div>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid-item').then(() => {
    

    console.log('=== GRID ITEM DEBUG ===');

    const item12 = document.querySelector('.item-12');
    const item6 = document.querySelector('.item-6');
    const item4 = document.querySelector('.item-4');

    setTimeout(() => {
      console.log('Item span=12:', {
        'grid-column': getComputedStyle(item12).gridColumn,
        'grid-column-start': getComputedStyle(item12).gridColumnStart,
        '--gstock-grid-item-span': getComputedStyle(item12)
          .getPropertyValue('--gstock-grid-item-span')
          .trim(),
        'span attribute': item12.getAttribute('span'),
      });

      console.log('Item span=6:', {
        'grid-column': getComputedStyle(item6).gridColumn,
        'grid-column-start': getComputedStyle(item6).gridColumnStart,
        '--gstock-grid-item-span': getComputedStyle(item6)
          .getPropertyValue('--gstock-grid-item-span')
          .trim(),
      });

      console.log('Item span=4:', {
        'grid-column': getComputedStyle(item4).gridColumn,
        'grid-column-start': getComputedStyle(item4).gridColumnStart,
        '--gstock-grid-item-span': getComputedStyle(item4)
          .getPropertyValue('--gstock-grid-item-span')
          .trim(),
      });
    }, 200);
  });
</script>

<style>
  .content {
    background: var(--gstock-color-background-accent-blue-subtle);
    border: 2px solid var(--gstock-color-border-accent-blue);
    border-radius: var(--gstock-border-radius-md);
    padding: var(--gstock-space-padding-lg);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--gstock-typography-font-weight-semibold);
  }

  .item-12 .content {
    background: var(--gstock-color-background-accent-teal-subtle);
    border-color: var(--gstock-color-border-accent-teal);
  }

  .item-6 .content {
    background: var(--gstock-color-background-accent-purple-subtle);
    border-color: var(--gstock-color-border-accent-purple);
  }

  .item-4 .content {
    background: var(--gstock-color-background-accent-orange-subtle);
    border-color: var(--gstock-color-border-accent-orange);
  }
</style>

<gstock-grid type="fixed-narrow">
  <gstock-grid-item span="12">
    <gstock-card>
      <div slot="header">Grid Fijo Estrecho (max-width: 760px)</div>
      <p>
        Este tipo de grid es ideal para contenido enfocado en texto como blogs y artículos, ya que
        limita la longitud de línea para mejorar la legibilidad.
      </p>
      <p>
        El contenido se centrará automáticamente cuando el viewport sea más ancho que el máximo
        permitido.
      </p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="12">
    <gstock-card>
      <div slot="header">Ejemplo de contenido</div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua.
      </p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid').then(() => {
    console.log('Fixed narrow grid loaded');
  });
</script>

<style>
  gstock-card {
    height: 100%;
  }
</style>

<gstock-grid type="fixed-wide">
  <gstock-grid-item span="12">
    <gstock-card>
      <div slot="header">Grid Fijo Ancho (max-width: 1280px)</div>
      <p>
        Este tipo de grid es ideal para páginas con mucha información como tablas de datos, donde se
        necesita equilibrar el espacio disponible con la legibilidad.
      </p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="8">
    <gstock-card>
      <div slot="header">Contenido principal - 8 columnas</div>
      <p>El contenido principal ocupa la mayor parte del espacio disponible.</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="4">
    <gstock-card>
      <div slot="header">Barra lateral - 4 columnas</div>
      <p>Información complementaria en la barra lateral.</p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid').then(() => {
    console.log('Fixed wide grid loaded');
  });
</script>

<style>
  gstock-card {
    height: 100%;
  }
</style>

<gstock-grid type="fluid" id="responsive-grid">
  <gstock-grid-item span="12" class="demo-item">
    <gstock-card>
      <div slot="header">Elemento Responsive</div>
      <p>
        <strong>Desktop (≥1024px):</strong>
        12 columnas
      </p>
      <p>
        <strong>Tablet (768-1023px):</strong>
        8 columnas
      </p>
      <p>
        <strong>Móvil (≤767px):</strong>
        4 columnas
      </p>
      <p id="current-breakpoint" class="breakpoint-info"></p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="6" class="demo-item">
    <gstock-card>
      <div slot="header">6 columnas en desktop</div>
      <p>Este elemento se adapta automáticamente a cada breakpoint.</p>
    </gstock-card>
  </gstock-grid-item>

  <gstock-grid-item span="6" class="demo-item">
    <gstock-card>
      <div slot="header">6 columnas en desktop</div>
      <p>Ocupa el ancho completo en pantallas pequeñas.</p>
    </gstock-card>
  </gstock-grid-item>
</gstock-grid>

<script type="module">
  customElements.whenDefined('gstock-grid').then(() => {
    
    const breakpointDisplay = document.querySelector('#current-breakpoint');

    function updateBreakpointInfo() {
      const width = window.innerWidth;
      let breakpoint = '';

      if (width < 480) {
        breakpoint = 'XXS (≤479px) - 4 columnas';
      } else if (width < 768) {
        breakpoint = 'XS (480-767px) - 8 columnas';
      } else if (width < 1024) {
        breakpoint = 'S (768-1023px) - 8 columnas';
      } else if (width < 1440) {
        breakpoint = 'M (1024-1439px) - 12 columnas';
      } else if (width < 1920) {
        breakpoint = 'L (1440-1919px) - 12 columnas';
      } else {
        breakpoint = 'XL (≥1920px) - 12 columnas';
      }

      breakpointDisplay.textContent = `Breakpoint actual: ${breakpoint}`;
    }

    updateBreakpointInfo();
    window.addEventListener('resize', updateBreakpointInfo);
  });
</script>

<style>
  gstock-card {
    height: 100%;
  }

  .breakpoint-info {
    padding: var(--gstock-space-padding-sm);
    background-color: var(--gstock-color-background-accent-mint-subtle);
    border-radius: var(--gstock-border-radius-sm);
    font-weight: var(--gstock-typography-font-weight-semibold);
    margin-top: var(--gstock-space-gap-md);
  }
</style>