ഫലകം:CategoryPage/styles.css

/* ==========================================================
   CATEGORY PAGE STYLES
   Abhiprayavedi – Editorial Landing Page
   Phase B4.2

   Layout Regions
   1. Editorial Hero
   2. Editorial Highlights
   3. Editorial Focus
   4. Editorial Context
   5. Editorial Archive

   Note:
   This stylesheet defines page layout only.
   Reusable component styling belongs to individual templates.
========================================================== */

/* ==========================================================
   1. EDITORIAL HERO
========================================================== */

.category-page-header{
    background:#edf2f7;
    padding:30px 20px;
    border-radius:10px;
    margin-bottom:30px;
    border-left:5px solid #3182ce;
}

.category-page-header h1{
    font-family:'Manjari','Meera',sans-serif !important;
    margin:0 0 8px;
    color:#1a202c;
}

.category-page-header p{
    margin:0;
    color:#4a5568;
}

/* ==========================================================
   2. EDITORIAL HIGHLIGHTS
========================================================== */

.category-highlights-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    padding:12px;
    background:#fff;
    border-radius:12px;
    margin-bottom:30px;
    width:100%;
    box-sizing:border-box;
}

/* Preserve ArticleCard layout inside the grid */

.category-highlights-grid > div{
    display:flex !important;
}

/* ==========================================================
   3. EDITORIAL FOCUS
   Reserved for future implementation
========================================================== */

.category-focus{
}

/* ==========================================================
   4. EDITORIAL CONTEXT
   Reserved for future implementation
========================================================== */

.category-context{
}

/* ==========================================================
   5. EDITORIAL ARCHIVE
========================================================== */

.older-articles-section{
    margin-top:40px;
    padding-top:20px;
    border-top:2px dashed #e2e8f0;
}

.older-articles-section h3{
    font-family:'Manjari',sans-serif !important;
    color:#2d3748;
    margin-bottom:15px;
}

.older-articles-list ul{
    list-style-type:square;
    padding-left:20px;
}

.older-articles-list li{
    font-family:'Manjari',sans-serif !important;
    font-size:1.05em;
    margin-bottom:10px;
    color:#4a5568;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

.category-highlights-grid{
    grid-template-columns:1fr;
    padding:8px;
    gap:10px;
}

}