/* ==========================================================================
   COMIC WEBSITE MASTER STYLESHEET (UNIFIED 2025)
   ========================================================================== */

/* --- FOUC PREVENTION --- */
body.archive-comic { visibility:hidden; opacity:0; transition:opacity .28s ease; }
body.archive-comic.ready { visibility:visible; opacity:1; }

/* GLOBAL COLORS */
html, body {
    background-color: #031a3d !important; /* Navy Blue Base */
    color: #fff !important;
    margin: 0;
    padding: 0;
}

/* ===============================
    GRID LAYOUTS (STRENGTHENED)
    =============================== */
/* Added "body" prefix to ensure these styles win over Elementor defaults */
body .comic-grid, 
body .trending-grid, 
body .covers-grid,
body .indie-grid,
body .placeholder-grid
.results-grid {
    display: grid !important; /* Forces grid even if moved from customizer */
   gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    justify-content: center;
    margin-top: 10px;
    list-style: none;
    padding: 0;
}

/* --- FIX: Force Grid Layout on Specific AJAX/Filter Containers --- */

/* Targets the main results containers shown in the inspect image */
#genre-results, 
#stream-results,
.results-grid,
.comic-grid.ajax-grid, 
.comic-grid.results-grid 
.comic-grid {
    display: grid !important;
    /*grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;*/
    gap: 20px !important;
    width: 100% !important;
}

/*tryig out the css id now instead of class*/
#genres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

/*.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 2fr));
    gap: 20px;
}*/

.placeholder-grid {
  display: grid;
  /*
   * Creates as many columns as can fit, each at least 150px wide.
   * The 'fr' unit ensures columns expand to fill available space if greater than 150px.
   * `auto-fill` (instead of `auto-fit`) is often preferred for placeholders as it will
   * create empty tracks even if there aren't enough items to fill them,
   * which can be useful for maintaining a consistent visual layout during loading or
   * when fewer items are present. If you specifically want tracks to collapse when empty,
   * stick with `auto-fit`. For placeholders, `auto-fill` is often more robust.
   */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px; /* Provides consistent spacing between grid items */

  /*
   * Optional: Alignment for the grid items within their cells.
   * `stretch` is usually the default and often desired, but `center` is common.
   * Remove these if you want items to stretch by default.
   */
  align-items: stretch;   /* Stretches items vertically to fill their grid area */
  justify-items: stretch; /* Stretches items horizontally to fill their grid area */

  /*
   * Optional: Alignment for the entire grid's tracks within the container.
   * Use these if your grid container has more space than its tracks.
   * `center` is a common choice for centering the whole grid.
   */
  justify-content: start; /* Aligns grid tracks to the start of the container */
  align-content: start;   /* Aligns grid tracks to the start of the container */
}

/* Consider adding specific styles for your comic-card children if needed */
.comic-card {
  /* For example, to ensure images inside the card scale correctly */
  max-width: 100%;
  height: auto;
  display: block; /* Helps remove extra space under images */
}

/* Ensure the cards inside those specific grids stack vertically within their grid cell */
.comic-grid.results-grid article.comic-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}


/* Specific sizing for Covers Grid */
body .covers-grid {
     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* ===============================
    CARD STYLING (THE "SKIN")
    =============================== */
.comic-card,
.trending-item,
.cover-item,
.indie-card {
    background: #000; 
    padding: 10px; 
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column; /* Stacks image -> title -> info */
    align-items: center;
    text-align: center;
    min-width: 0;
}

.comic-card:hover,
.trending-item:hover,
.cover-item:hover,
.indie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

/* === Thumbnails (No Cropping) === */
.comic-thumb img,
.t-thumb img,
.cover-item img,
.indie-thumb img,
.comic-cover img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* ===============================
    METADATA (TITLE & INFO STACK)
    =============================== */
.comic-title,
.t-title,
.indie-card h4 {
    color: #0eafff;
    font-weight: 700;
    font-size: 1rem;
    margin: 10px 0 5px 0;
    text-decoration: none;
}

/* THE "NEW LINE" FIX: Stacks Publisher & Views Vertically */
.comic-sub,
.t-sub,
.indie-subtext {
    display: flex;
    flex-direction: column; /* FORCES VERTICAL STACK */
    align-items: center;    /* CENTERS EVERYTHING */
    gap: 4px;              /* SPACE BETWEEN PUB AND VIEWS */
    color: #bfcbdc;
    font-size: 0.85rem;
    width: 100%;
}

/* SVG ICON FIX */
.t-views svg,
.comic-sub svg {
    width: 14px;
    height: 14px;
    fill: #0eafff;
    vertical-align: middle;
}

/* ===============================
    RANKING SPECIFIC (TRENDING)
    =============================== */
.dropcap-number {
    background: #0eafff;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 1.2rem; 
    font-weight: 900; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 10px;
}

/* The "Rank 1" Black Text Special Request */
.rank-1 {
    border: 2px solid gold;
    background-color: #b39225;
}

.rank-1 .t-title, 
.rank-1 .t-publisher, 
.rank-1 .t-views,
.rank-1 .dropcap-number {
    color: #000000 !important;
}

.rank-1 svg, .rank-1 circle {
    fill: #000000 !important;
}

/* ===============================
    SECTIONS & SEARCH
    =============================== */
/*.boxed-section {*/
/*    max-width: 1140px;*/
/*    margin: 2rem auto;*/
/*    background: #111;*/
/*    padding: 2rem;*/
/*    border-radius: 12px;*/
/*    box-shadow: 0 4px 20px rgba(0,0,0,0.25);*/
/*}*/

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header .accent-bar {
    width: 8px;
    height: 28px;
    background-color: #0eafff;
    border-radius: 4px;
    margin-right: 10px;
}

.universal-search-form {
    display: flex;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.search-input {
    flex: 1;
    padding: 12px;
    border: none;
    color: #fff;
    background: #111;
}

.search-btn {
    background: #0eafff;
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
}

/* ===============================
    RESPONSIVE ADJUSTMENTS
    =============================== */
@media (max-width: 767px) {
    body .comic-grid, 
    body .trending-grid, 
    body .covers-grid { 
        grid-template-columns: repeat(2, 1fr) !important; /* 2 cards per row on mobile */
    }
    
    .universal-search-form {
        flex-direction: column;
    }
    
    .search-btn {
        padding: 12px;
    }
}

/* --- BANNER CAROUSEL --- */
/*.banner-carousel { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.banner-carousel img { width: 100%; height: auto; max-height: 400px; object-fit: cover; }*/

.banner-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 24px;
}
.banner-carousel .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.banner-carousel .banner-slide {
    flex: 0 0 100%;
}
.banner-carousel img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    object-position: left bottom;
}
.carousel-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.4); 
    color: white; 
    border: none; 
    font-size: 24px; 
    cursor: pointer; 
    z-index: 10; 
    padding: 10px 15px; 
    border-radius: 50%; 
} 
.carousel-btn.prev { left: 15px; } 
.carousel-btn.next { right: 15px; } 
.carousel-btn:hover { background: rgba(0,0,0,0.6); }

/* --- Mobile Styles --- */
@media (max-width: 768px) {
    .banner-carousel img {
        height: 40vh; 
        object-position: left bottom; 
    }

    .carousel-btn {
        /* Make carousel btns smaller */
        padding: 8px 12px;
        font-size: 18px;
    }

    .carousel-btn.prev { left: 5px; } 
    .carousel-btn.next { right: 5px; }
}


/* ===============================
    FILTER BUTTONS (GENRE & STREAM)
    =============================== */
.filter-controls,
.stream-buttons { /* Unified controls for genre and stream buttons */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.filter-btn,
.stream-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #222;
    cursor: pointer;
    font-weight: 700;
    background: #111;
    color: #fff;
    transition: all 0.25s ease;
}
.filter-btn.active,
.stream-btn.active,
.filter-btn:hover,
.stream-btn:hover {
    background: #0eafff;
    color: #fff;
    border-color: #0eafff;
}