/* gspostlist.css version 2.0.2 - Standalone Master System (Color Protected) */

:root {
    /* --- BRANDING CONFIG () --- */
    --gs-accent: #555555;       /* Master  */
    --gs-accent-hover: #000000; /* Darker  */
    --gs-accent-light: #dbdbdb; /* Lighter  Tint */
    --gs-black: #000000;
    --gs-white: #ffffff;
    --gs-dark: #111111;
    --gs-med: #444444;
    --gs-light: #666666;
    --gs-muted: #999999;
    --gs-border: #eeeeee;
    --gs-border-med: #cccccc;
    --gs-hover-bg: #fcfcfc;

    /* --- ROUNDING CONTROL --- */
    --gs-round-lg: 24px;   
    --gs-round-md: 12px;   
    --gs-round-sm: 8px;    
    --gs-round-xsm: 4px;   
    --gs-round-no: 0px;    
    --gs-round-btn: 4px;   

    /* --- PADDING CONTROL --- */
    --gs-pad-base: 2rem;      
    --gs-pad-overlay: 2.5rem; 
    --gs-pad-split: 3.5rem;   
}

/* ==========================================================================
   INTERNAL LAYOUT ENGINE & SPACING (Mechanical Grid Support)
   ========================================================================== */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.overflow-hidden { overflow: hidden !important; }
.h-100 { height: 100% !important; }
.h-50 { height: 50% !important; }
.w-100 { width: 100% !important; }

/* Spacing Helpers */
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.p-4 { padding: 1.5rem !important; }
.py-3 { padding: 1rem 0 !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ms-sm-4 { margin-left: 1.5rem !important; }

/* Borders & Rounding */
.border-bottom { border-bottom: 1px solid var(--gs-border) !important; }
.border-top { border-top: 1px solid var(--gs-border) !important; }
.rounded-4 { border-radius: 1.25rem !important; }
.rounded-pill { border-radius: 50rem !important; }

/* Shadows */
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,0.075) !important; }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important; }

@media (max-width: 768px) {
    .h-100, .h-50 { height: auto !important; min-height: 250px; }
}

/* ==========================================================================
   BENTO GRID SPECIFIC SHIMS (Supports bento.php)
   ========================================================================== */
.gs-bento-card { transition: box-shadow 0.3s ease; text-decoration: none !important; position: relative; display: flex; }
.gs-bento-card img { transition: filter 0.3s ease; object-fit: cover; }
.gs-bento-card:hover img { filter: brightness(1.15) !important; }

.gs-bento-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    z-index: 2;
}

/* Bento Typography - Color Locked to White */
.gs-bento-title {
    color: #ffffff !important; font-weight: 700; line-height: 1.1; 
    margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.gs-bento-card:hover .gs-bento-title { text-decoration: underline !important; }

.gs-bento-desc {
    font-size: 0.95rem; line-height: 1.4; color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ==========================================================================
   GS SYSTEM: LIST STYLES (Supports lists.php)
   ========================================================================== */
.gspost-style-list, .gspost-style-list2 {
    list-style: none !important; padding-left: 0 !important; margin: 20px 0;
}

.gspost-style-list li, .gspost-style-list2 li { 
    margin-left: 0 !important; padding: 6px 0; color: var(--gs-black); 
    display: flex; align-items: baseline; position: relative; padding-left: 25px;
}

.gspost-style-list li::before, .gspost-style-list2 li::before { 
    content: "→"; position: absolute; left: 0; color: var(--gs-accent); font-weight: bold;
}

.gspost-style-list2 { font-family: "Times New Roman", Times, Baskerville, Georgia, serif; font-size: 1.2em; }
.gspost-style-list2 li a { color: var(--gs-black) !important; text-decoration: none; }
.gspost-style-list2 li a:hover { text-decoration: underline; color: var(--gs-accent) !important; }

/* list3: Modern Full-Cell Card List */
.gspost-style-list3 {
    list-style: none !important; padding: 0 !important; margin: 30px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border: 1px solid var(--gs-border); border-radius: 8px; overflow: hidden; 
}
.gspost-style-list3 li { margin-left: 0 !important; border-bottom: 1px solid var(--gs-border); background: var(--gs-white); transition: all 0.2s ease; }
.gspost-style-list3 li:last-child { border-bottom: none; }
.gspost-style-list3 li:hover { background-color: var(--gs-hover-bg); box-shadow: inset 4px 0 0 0 var(--gs-accent); }
.gspost-style-list3 li a { display: block; padding: 25px 30px; text-decoration: none !important; color: var(--gs-dark); }
.gspost-style-list3 .gspost-title { display: block; font-size: 18px; font-weight: 600; color: var(--gs-dark); }
.gspost-style-list3 .gspost-desc { display: block; margin-top: 8px; font-size: 14px; color: var(--gs-light); }

/* ==========================================================================
   GS SYSTEM: THE MASTER CARD (CHASSIS)
   ========================================================================== */
.gs-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    overflow: hidden; text-decoration: none !important; border: none !important;
    cursor: pointer; background-color: var(--gs-white); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gs-card img { display: block; width: 100%; transition: filter 0.3s ease; object-fit: cover; }
.gs-card:hover img { filter: brightness(1.15); }

.gs-card .gs-content {
    display: flex; flex-direction: column; flex-grow: 1; padding: var(--gs-pad-base); z-index: 2;
}

.gs-card .gs-title {
    font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; 
    margin-top: 0; margin-bottom: 0.75rem; color: var(--gs-dark) !important; 
}
.gs-card:hover .gs-title { text-decoration: underline !important; color: var(--gs-accent) !important; }

.gs-card .gs-desc {
    font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; color: var(--gs-light) !important; 
}

/* Master Button */
.gs-card .gs-button {
    display: inline-block; position: relative; z-index: 10; align-self: flex-start; 
    margin-top: auto; padding: 13px 30px !important;
    background-color: var(--gs-dark); border: 1px solid var(--gs-dark) !important;
    color: #ffffff !important; font-size: 13px; font-weight: 700 !important;
    /* text-transform: uppercase; letter-spacing: 1px; */
    border-radius: var(--gs-round-btn) !important; transition: all 0.3s ease;
}
.gs-card:hover .gs-button { 
    /* background-color: var(--gs-accent) !important; border-color: var(--gs-accent) !important; */
    transform: translateY(-2px); text-decoration: none !important;
}

.gs-card .gs-badge {
    display: inline-block; align-self: flex-start; background-color: var(--gs-accent);
    color: #ffffff; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.2px; padding: 6px 12px; border-radius: 2px; margin-bottom: 15px; white-space: nowrap;
}

/* ==========================================================================
   GS SYSTEM: LAYOUT MODIFIERS (Overlay & Split)
   ========================================================================== */
.gs-card-overlay { background-color: var(--gs-black); }
.gs-card-overlay .gs-content {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    justify-content: flex-end; padding: var(--gs-pad-overlay); 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, transparent 75% );
}
.gs-card-overlay .gs-title, .gs-card-overlay .gs-desc { color: #ffffff !important; }

.gs-card-split { background-color: var(--gs-white); }
.gs-card-split .gs-content { padding: var(--gs-pad-split); justify-content: flex-end; }
.gs-card-split .gs-content > :first-child { margin-top: auto; }

/* ==========================================================================
   GS SYSTEM: GLOBAL DESIGN SKINS
   ========================================================================== */
.gs-master-wrapper.gs-mode-square {
    --gs-round-lg: 0px !important; --gs-round-md: 0px !important; --gs-round-btn: 0px !important;
}
.gs-master-wrapper.gs-mode-flat .gs-card { background-color: transparent !important; box-shadow: none !important; }
.gs-master-wrapper.gs-mode-flat .gs-card .gs-content { padding-left: 0 !important; padding-right: 0 !important; }

.gs-master-wrapper.gs-mode-dark {
    --gs-white: #121212 !important; --gs-dark: #ffffff !important; --gs-light: #a0a0a0 !important;
}

/* Utilities */
.gs-round-lg { border-radius: var(--gs-round-lg) !important; }
.gs-round-md { border-radius: var(--gs-round-md) !important; }
.gs-truncate-desc {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==========================================================================
   GLOBAL CARDS (Standard Bootstrap Skin)
   ========================================================================== */
.card {
    position: relative; 
    display: flex; 
    flex-direction: column; 
    min-width: 0;
    word-wrap: break-word; 
    background-color: #ffffff; 
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.1); 
    border-radius: 0.5rem; 
    height: 100%;
}

.card-body { flex: 1 1 auto; padding: 1.5rem; }

.card-img-top, .card-img { 
    width: 100%; 
    border-radius: calc(0.5rem - 1px); 
    object-fit: cover;
}

.card-img-overlay {
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    border-radius: calc(0.5rem - 1px);
}

/* ==========================================================================
   BRANDING SHIMS (Overrides)
   ========================================================================== */
.text-primary { color: var(--gs-accent) !important; }

.btn-primary { 
    background-color: var(--gs-accent) !important; 
    border-color: var(--gs-accent) !important; 
    color: #ffffff !important; 
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var(--gs-accent-hover) !important;
    border-color: var(--gs-accent-hover) !important;
}

.badge { 
    background-color: var(--gs-accent) !important; 
    color: #ffffff !important; 
    font-weight: 700; 
    padding: 0.35em 0.65em; 
    border-radius: 0.25rem; 
}

/* ==========================================================================
   NAVIGATION & UI COMPONENTS
   ========================================================================== */
.sticky-top { position: sticky; top: 2rem; z-index: 1020; }

.nav-link { transition: all 0.2s ease; }
.nav-link:hover { 
    color: var(--gs-accent) !important; 
    border-left: 2px solid var(--gs-accent); 
}

.profile-image-frame { 
    background-color: rgba(255, 255, 255, 0.15) !important; 
    overflow: hidden; 
}