/*
 * Fichero: layout.css
 * Descripción: Contiene el layout base, sistema de Grid y clases helper de espaciado (Stack/Inline).
*/

/* 1. Contenedor Principal (Container) */
.ptk-container {
    max-width: var(--ptk-container-max);
    padding-inline: var(--ptk-container-pad);
    /* padding-left/right */
    margin: 0 auto;
    /* Centrado */
}

/* Variantes de Contenedor */
.ptk-container--sm {
    max-width: 640px;
    /* Lectura enfocada / Formularios simples */
}

.ptk-container--md {
    max-width: 1024px;
    /* Ancho medio (Tablet landscape / Laptop pequeño) */
}

.ptk-container--lg {
    max-width: 1440px;
    /* Pantallas grandes / Dashboards */
}

.ptk-container--fluid {
    max-width: 100%;
    /* Ancho completo */
}

/* 2. Grid System */
.ptk-grid {
    display: grid;
    gap: var(--ptk-space-8);
    /* Espaciado por defecto */
}

/* Modificadores de columnas */
.ptk-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ptk-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ptk-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive Grid (Mobile First) */
/* Por defecto, una columna en móviles */
@media (min-width: var(--ptk-bp-sm)) {
    .ptk-cols-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: var(--ptk-bp-md)) {
    /* ... más breakpoints ... */
}

/* 3. Layout Helpers (Stack/Inline/Center) */
/* Stack (Vertical Gap) */
.ptk-stack-1 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-1);
}

.ptk-stack-2 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-2);
}

.ptk-stack-3 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-3);
}

.ptk-stack-4 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-4);
}

.ptk-stack-6 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-6);
}

.ptk-stack-8 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-8);
}

.ptk-stack-10 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-10);
}

.ptk-stack-12 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-12);
}

.ptk-stack-16 {
    display: flex;
    flex-direction: column;
    gap: var(--ptk-space-16);
}

/* Inline (Horizontal Gap + Wrap) */
.ptk-inline-1 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptk-space-1);
}

.ptk-inline-2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptk-space-2);
}

.ptk-inline-3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptk-space-3);
}

.ptk-inline-4 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptk-space-4);
}

.ptk-inline-6 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptk-space-6);
}

.ptk-inline-8 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptk-space-8);
}

/* Flexbox Utilities */
.ptk-flex {
    display: flex;
}

.ptk-flex-col {
    flex-direction: column;
}

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

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

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

.ptk-justify-end {
    justify-content: flex-end;
}

.ptk-flex-wrap {
    flex-wrap: wrap;
}

.ptk-flex-nowrap {
    flex-wrap: nowrap;
}

.ptk-flex-1 {
    flex: 1;
}

.ptk-flex-shrink-0 {
    flex-shrink: 0;
}

/* Gap Utilities (Independent of Display) */
.ptk-gap-1 {
    gap: var(--ptk-space-1);
}

.ptk-gap-2 {
    gap: var(--ptk-space-2);
}

.ptk-gap-3 {
    gap: var(--ptk-space-3);
}

.ptk-gap-4 {
    gap: var(--ptk-space-4);
}

.ptk-gap-6 {
    gap: var(--ptk-space-6);
}

.ptk-gap-8 {
    gap: var(--ptk-space-8);
}

.ptk-gap-10 {
    gap: var(--ptk-space-10);
}

.ptk-gap-12 {
    gap: var(--ptk-space-12);
}

.ptk-gap-16 {
    gap: var(--ptk-space-16);
}

/* 4. Estructuras Específicas: Navbar y Footer (Requeridas por Styleguide.html) */

.ptk-hero {
    position: relative;
    width: 100%;
    min-height: 85vh;
    /* Más inmersivo (Accenture style) */
    display: flex;
    align-items: center;
    padding: var(--ptk-space-16) 0;
    overflow: hidden;

}

/* Navbar Base */
.ptk-navbar {
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: var(--ptk-color-surface);
    /* Fondo sólido por defecto */
    border-bottom: 1px solid var(--ptk-color-border);
}

/* Fondo con efecto blur (Moderno) */
@supports (backdrop-filter: blur(10px)) {
    .ptk-navbar {
        background-color: color-mix(in srgb, var(--ptk-color-surface) 90%, transparent);
        backdrop-filter: blur(8px);
    }
}

.ptk-navbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 72px;
    /* Altura mínima táctil/visualmente cómoda */
}

/*
 * --------------------------------
 * Layout: Contenedores y Grid
 * --------------------------------
*/

/* Contenedor más estrecho para contenido largo (ideal para posts y artículos) */
.ptk-container--narrow {
    max-width: 760px;
    /* Ancho óptimo para lectura larga */
}

/* Centrado de elementos en línea */
.ptk-inline-center {
    justify-content: center;
}

/* ... resto del CSS para Navbar, Footer, Hero ... */

/* 5. Utilidades de Fondo */
.ptk-bg-surface-1 {
    background-color: var(--ptk-color-surface);
}

.ptk-bg-surface-2 {
    background-color: var(--ptk-color-surface-2);
}

/* 6. Utilidades de Texto */
.ptk-text-center {
    text-align: center !important;
}

.ptk-text-left {
    text-align: left !important;
}

.ptk-text-right {
    text-align: right !important;
}

/* 7. Flexbox Utilities */
.ptk-flex {
    display: flex;
}

.ptk-flex-col {
    display: flex;
    flex-direction: column;
}

.ptk-flex-row {
    display: flex;
    flex-direction: row;
}

.ptk-flex-wrap {
    flex-wrap: wrap;
}

.ptk-flex-nowrap {
    flex-wrap: nowrap;
}

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

.ptk-items-start {
    align-items: flex-start;
}

.ptk-items-end {
    align-items: flex-end;
}

.ptk-items-stretch {
    align-items: stretch;
}

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

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

.ptk-justify-start {
    justify-content: flex-start;
}

.ptk-justify-end {
    justify-content: flex-end;
}

/* 8. Grid Spans */
.ptk-span-2 {
    grid-column: span 2;
}

.ptk-span-3 {
    grid-column: span 3;
}

.ptk-span-4 {
    grid-column: span 4;
}

.ptk-span-full {
    grid-column: 1 / -1;
}

/* 9. Section Spacing (Padding Y) */
.ptk-py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.ptk-py-4 {
    padding-top: var(--ptk-space-4);
    padding-bottom: var(--ptk-space-4);
}

.ptk-py-8 {
    padding-top: var(--ptk-space-8);
    padding-bottom: var(--ptk-space-8);
}

.ptk-py-10 {
    padding-top: var(--ptk-space-10);
    padding-bottom: var(--ptk-space-10);
}

.ptk-py-16 {
    padding-top: var(--ptk-space-16);
    padding-bottom: var(--ptk-space-16);
}

.ptk-py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Custom large spacing */

/* 10. Visibility */
.ptk-hidden {
    display: none !important;
}

@media (max-width: 480px) {
    .ptk-hide-sm {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .ptk-hide-md {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .ptk-show-md {
        display: block !important;
    }
}

/* 11. Gap Utilities (for Grids & Flex) */
.ptk-gap-1 {
    gap: var(--ptk-space-1);
}

.ptk-gap-2 {
    gap: var(--ptk-space-2);
}

.ptk-gap-3 {
    gap: var(--ptk-space-3);
}

.ptk-gap-4 {
    gap: var(--ptk-space-4);
}

.ptk-gap-6 {
    gap: var(--ptk-space-6);
}

.ptk-gap-8 {
    gap: var(--ptk-space-8);
}

.ptk-gap-10 {
    gap: var(--ptk-space-10);
}

.ptk-gap-12 {
    gap: var(--ptk-space-12);
}

.ptk-gap-16 {
    gap: var(--ptk-space-16);
}

/* 12. Margin Utilities */
.ptk-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 
 * --------------------------------
 * 13. Common Utilities (Added for About Page & General Use)
 * --------------------------------
*/

/* Sizing */
.ptk-w-full {
    width: 100% !important;
}

.ptk-h-full {
    height: 100% !important;
}

/* Spacing - Margins */
.ptk-mb-2 {
    margin-bottom: var(--ptk-space-2) !important;
}

.ptk-mb-4 {
    margin-bottom: var(--ptk-space-4) !important;
}

.ptk-mb-6 {
    margin-bottom: var(--ptk-space-6) !important;
}

.ptk-mb-8 {
    margin-bottom: var(--ptk-space-8) !important;
}

/* Spacing - Padding */
.ptk-p-0 {
    padding: 0 !important;
}

/* Visual / Layout */
.ptk-object-cover {
    object-fit: cover;
}

.ptk-overflow-hidden {
    overflow: hidden;
}