/*--------------------------------------------------------------
# AuthorPro Layout & Grid Architecture
# Description: Containers, Grid Systems, Main/Sidebar 2-Col Layout,
#              Flex Helpers, and Alignment Breakouts
--------------------------------------------------------------*/

/* =============================================================
   1. Core Container (.authorpro-container)
   ============================================================= */
.authorpro-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--authorpro-container-padding, 1.5rem);
    padding-right: var(--authorpro-container-padding, 1.5rem);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .authorpro-container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .authorpro-container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .authorpro-container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .authorpro-container {
        max-width: 1240px;
    }
}

@media (min-width: 1400px) {
    .authorpro-container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .authorpro-container {
        max-width: 1400px;
    }
}

.authorpro-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================
   2. Main Layout Wrappers & Two-Column System
   ============================================================= */
.authorpro-main-wrapper {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: calc(100vh - 12rem);
}

.authorpro-bg-default {
    background-color: var(--authorpro-color-slate-50);
}

.authorpro-bg-custom {
    background-color: transparent;
}

.authorpro-bg-white {
    background-color: var(--authorpro-color-white);
}

/* Custom Background Mode Variations */
.custom-background .authorpro-main-wrapper {
    background-color: transparent;
}

.custom-background .authorpro-main-wrapper > .authorpro-container,
.authorpro-container-custom-bg {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: var(--authorpro-radius-2xl);
    box-shadow: var(--authorpro-shadow-sm);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

/* Primary Two-Column Row (.authorpro-layout-row) */
.authorpro-layout-row {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .authorpro-layout-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .authorpro-main-content.authorpro-main-has-sidebar {
        width: calc(72% - 1.25rem);
        flex: 0 0 calc(72% - 1.25rem);
        min-width: 0;
    }

    .authorpro-main-content.authorpro-main-fullwidth {
        width: 100%;
        flex: 0 0 100%;
    }

    .authorpro-sidebar {
        width: calc(28% - 1.25rem);
        flex: 0 0 calc(28% - 1.25rem);
        min-width: 0;
    }
}

.authorpro-main-content {
    width: 100%;
    min-width: 0;
}

.authorpro-sidebar {
    width: 100%;
    min-width: 0;
}

/* =============================================================
   3. Card Grid System (.authorpro-card-grid)
   ============================================================= */
/* Mobile default: 1 Column */
.authorpro-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
}

/* Tablet & Compact Desktop (640px - 1279px): Maximum 2 Columns */
@media (min-width: 640px) {
    .authorpro-card-grid.authorpro-grid-cols-2,
    .authorpro-card-grid.authorpro-grid-cols-3,
    .authorpro-card-grid.authorpro-grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

/* Fullwidth / No-sidebar edge-case: 3 columns at 1024px when full width is available */
@media (min-width: 1024px) {
    .authorpro-main-fullwidth .authorpro-card-grid.authorpro-grid-cols-3,
    .page-template-fullwidth .authorpro-card-grid.authorpro-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* Large Desktop Screens (1280px+): Enable 3 Columns */
@media (min-width: 1280px) {
    .authorpro-card-grid.authorpro-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }

    .authorpro-card-grid.authorpro-grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* Extra-Wide Screens (1440px+): Enable 4 Columns if selected */
@media (min-width: 1440px) {
    .authorpro-card-grid.authorpro-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* =============================================================
   4. Generic Grid Helpers
   ============================================================= */
.authorpro-grid {
    display: grid;
}

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

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

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

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

.authorpro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.authorpro-col-span-1 {
    grid-column: span 1 / span 1;
}

@media (min-width: 768px) {
    .authorpro-md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .authorpro-md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .authorpro-md-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .authorpro-lg-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .authorpro-lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .authorpro-lg-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .authorpro-lg-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/* Gaps */
.authorpro-gap-1 { gap: 0.25rem; }
.authorpro-gap-2 { gap: 0.5rem; }
.authorpro-gap-3 { gap: 0.75rem; }
.authorpro-gap-4 { gap: 1rem; }
.authorpro-gap-6 { gap: 1.5rem; }
.authorpro-gap-8 { gap: 2rem; }
.authorpro-gap-12 { gap: 3rem; }
.authorpro-gap-16 { gap: 4rem; }

/* =============================================================
   5. Flexbox Layout Helpers
   ============================================================= */
.authorpro-flex {
    display: flex;
}

.authorpro-inline-flex {
    display: inline-flex;
}

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

.authorpro-flex-row {
    flex-direction: row;
}

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

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

.authorpro-flex-1 {
    flex: 1 1 0%;
}

.authorpro-flex-grow {
    flex-grow: 1;
}

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

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

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

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

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

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

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

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

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

/* Responsive Flex Direction */
@media (min-width: 640px) {
    .authorpro-sm-flex-row {
        flex-direction: row;
    }
    .authorpro-sm-flex-col {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .authorpro-md-flex-row {
        flex-direction: row;
    }
    .authorpro-md-flex-col {
        flex-direction: column;
    }
}

@media (min-width: 1024px) {
    .authorpro-lg-flex-row {
        flex-direction: row;
    }
    .authorpro-lg-flex-col {
        flex-direction: column;
    }
}

/* Width & Sizing Helpers */
.authorpro-w-full {
    width: 100%;
}

.authorpro-w-auto {
    width: auto;
}

.authorpro-h-full {
    height: 100%;
}

.authorpro-min-h-screen {
    min-height: 100vh;
}

.authorpro-sidebar-pl {
    padding-left: 2rem;
}

.authorpro-widget-area {
    flex-shrink: 0;
}

/* Max-Width Constraints */
.authorpro-max-w-xl { max-width: 36rem; }
.authorpro-max-w-2xl { max-width: 42rem; }
.authorpro-max-w-3xl { max-width: 48rem; }
.authorpro-max-w-4xl { max-width: 56rem; }
.authorpro-max-w-5xl { max-width: 64rem; }
.authorpro-max-w-7xl { max-width: 80rem; }
.authorpro-max-w-none { max-width: none; }

/* =============================================================
   6. Viewport Breakout Alignments (.alignfull, .alignwide)
   ============================================================= */
/* Full Width (Edge-to-Edge breakout from constrained container) */
.alignfull,
.authorpro-alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Full Width Page Template Exception */
.page-template-fullwidth .alignfull,
.page-template-fullwidth .authorpro-alignfull {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Wide Width (Constrained to --wide-size) */
.alignwide,
.authorpro-alignwide {
    max-width: var(--authorpro-wide-size, 1400px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* Center Alignment */
.aligncenter,
.authorpro-aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    clear: both;
}

/* Floated Alignments */
.alignleft,
.authorpro-alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.alignright,
.authorpro-alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

*:has(> .alignleft),
*:has(> .alignright),
*:has(> .authorpro-alignleft),
*:has(> .authorpro-alignright),
.authorpro-flow-root {
    display: flow-root;
}

.authorpro-clearfix::after {
    content: "";
    display: table;
    clear: both;
}