/* =========================================================
   HyperDAF Core — Layout Styles
   Location: /wp-content/themes/hyperdaf-core/assets/css/layout.css
   Purpose:
   - Global layout helpers for containers, sections, page spacing,
   - breadcrumb, section headings, responsive content widths,
   - archive/single page shells, and loop grids.
   -
   - Important:
   - Shadow/blur helpers are intentionally NOT added here.
   - Per project rule, shadow effects are allowed only on loop cards,
   - so card shadow styling should stay inside component/card files.
========================================================= */

.hdaf-container{
    width:100%;
    max-width:var(--hdaf-container);
    margin:0 auto;
    padding:0 20px;
}

.hdaf-content{
    width:100%;
    max-width:var(--hdaf-content);
}

.hdaf-content--center{
    margin-left:auto;
    margin-right:auto;
}

.hdaf-page{
    padding:32px 0 64px;
}

.hdaf-page--tight{
    padding:24px 0 48px;
}

.hdaf-page--soft{
    background:var(--hdaf-color-surface-soft);
}

.hdaf-section{
    padding:64px 0;
}

.hdaf-section--sm{
    padding:40px 0;
}

.hdaf-section--lg{
    padding:88px 0;
}

.hdaf-section--soft{
    background:var(--hdaf-color-surface-soft);
}

.hdaf-surface{
    background:var(--hdaf-color-surface);
}

.hdaf-surface-soft{
    background:var(--hdaf-color-surface-soft);
}

.hdaf-border{
    border:1px solid var(--hdaf-color-border);
}

.hdaf-rounded-sm{
    border-radius:var(--hdaf-radius-sm);
}

.hdaf-rounded-md{
    border-radius:var(--hdaf-radius-md);
}

.hdaf-rounded-lg{
    border-radius:var(--hdaf-radius-lg);
}

/* =========================================================
   Section Heading
========================================================= */

.hdaf-section-head{
    margin-bottom:24px;
}

.hdaf-section-head--center{
    text-align:center;
}

.hdaf-section-head__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    color:var(--hdaf-color-primary);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hdaf-section-head__title{
    margin:0;
    color:var(--hdaf-color-heading);
}

.hdaf-section-head__text{
    max-width:720px;
    margin-top:10px;
    color:var(--hdaf-color-muted);
}

.hdaf-section-head--center .hdaf-section-head__text{
    margin-left:auto;
    margin-right:auto;
}

.hdaf-title-underline{
    position:relative;
    padding-bottom:14px;
}

.hdaf-title-underline::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:64px;
    height:4px;
    border-radius:999px;
    background:var(--hdaf-color-primary);
}

.hdaf-title-underline--accent::after{
    background:var(--hdaf-color-accent);
}

.hdaf-title-underline--center{
    text-align:center;
}

.hdaf-title-underline--center::after{
    left:50%;
    transform:translateX(-50%);
}

/* =========================================================
   Breadcrumb
========================================================= */

.hdaf-breadcrumb-wrap{
    padding:14px 0 0;
}

.hdaf-breadcrumb,
.hdaf-header-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    color:var(--hdaf-color-muted);
    font-size:13px;
    line-height:1.6;
}

.hdaf-breadcrumb a,
.hdaf-header-breadcrumb a{
    color:var(--hdaf-color-muted);
    text-decoration:none;
}

.hdaf-breadcrumb a:hover,
.hdaf-header-breadcrumb a:hover{
    color:var(--hdaf-color-primary);
}

.hdaf-breadcrumb-current{
    color:var(--hdaf-color-heading);
    font-weight:600;
}

.hdaf-breadcrumb-sep{
    color:#94a3b8;
}

/* =========================================================
   Background Helpers
========================================================= */

.hdaf-bg-soft{
    background:var(--hdaf-color-surface-soft);
}

.hdaf-bg-primary-soft{
    background:#eff6ff;
}

.hdaf-bg-accent-soft{
    background:#fff7ed;
}

.hdaf-bg-success-soft{
    background:var(--hdaf-color-success-soft);
}

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

.hdaf-stack{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.hdaf-stack--sm{
    gap:16px;
}

.hdaf-stack--lg{
    gap:32px;
}

.hdaf-page-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:32px;
}

.hdaf-page-grid--sidebar-right{
    grid-template-columns:minmax(0, 1fr) 320px;
    align-items:start;
}

.hdaf-page-grid--sidebar-left{
    grid-template-columns:320px minmax(0, 1fr);
    align-items:start;
}

.hdaf-main{
    min-width:0;
}

.hdaf-sidebar{
    min-width:0;
}

/* =========================================================
   Loop / Grid Layouts
========================================================= */

.hdaf-loop,
.hdaf-grid{
    display:grid;
    gap:24px;
}

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

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

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

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

.hdaf-grid--auto{
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.hdaf-grid--tight{
    gap:16px;
}

.hdaf-grid--wide{
    gap:32px;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1199px){
    .hdaf-page-grid--sidebar-right,
    .hdaf-page-grid--sidebar-left{
        grid-template-columns:minmax(0, 1fr);
    }

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

@media (max-width: 991px){
    .hdaf-container{
        padding:0 18px;
    }

    .hdaf-page{
        padding:24px 0 48px;
    }

    .hdaf-section{
        padding:52px 0;
    }

    .hdaf-section--sm{
        padding:32px 0;
    }

    .hdaf-section--lg{
        padding:72px 0;
    }

    .hdaf-loop,
    .hdaf-grid--cards,
    .hdaf-grid--4{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px){
    .hdaf-container{
        padding:0 16px;
    }

    .hdaf-page{
        padding:20px 0 40px;
    }

    .hdaf-page--tight{
        padding:16px 0 32px;
    }

    .hdaf-section{
        padding:40px 0;
    }

    .hdaf-section--sm{
        padding:24px 0;
    }

    .hdaf-section--lg{
        padding:56px 0;
    }

    .hdaf-section-head{
        margin-bottom:20px;
    }

    .hdaf-breadcrumb,
    .hdaf-header-breadcrumb{
        gap:6px;
        font-size:12px;
    }

    .hdaf-loop,
    .hdaf-grid--cards,
    .hdaf-grid--2,
    .hdaf-grid--4,
    .hdaf-grid--auto{
        grid-template-columns:minmax(0, 1fr);
    }
}