/* =============================================================================
   Block: td_block_sasa_category_grid
   Layout: salmon container, category header, 3-column card grid
   ============================================================================= */

.td_block_sasa_category_grid .sasa-cgrid-wrap {
    background: #fce8e3;
    border-radius: 16px;
    padding: 24px 20px;
    margin: 0 20px;
}

/* --- Header row ------------------------------------------------------------ */

.td_block_sasa_category_grid .sasa-cgrid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.td_block_sasa_category_grid .sasa-cgrid-cat-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.td_block_sasa_category_grid .sasa-cgrid-see-all {
    font-size: 14px;
    font-weight: 600;
    color: #e74c3c;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.td_block_sasa_category_grid .sasa-cgrid-see-all:hover {
    opacity: 0.75;
}

/* --- Post grid ------------------------------------------------------------- */

.td_block_sasa_category_grid .sasa-cgrid-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* --- Individual card ------------------------------------------------------- */

.td_block_sasa_category_grid .td_module_sasa_category_grid {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.td_block_sasa_category_grid .sasa-cgrid-image {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    aspect-ratio: 16 / 10;
    position: relative;
}

.td_block_sasa_category_grid .sasa-cgrid-image a {
    display: block;
    height: 100%;
}

.td_block_sasa_category_grid .sasa-cgrid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.td_block_sasa_category_grid .td_module_sasa_category_grid:hover .sasa-cgrid-img {
    transform: scale(1.04);
}

.td_block_sasa_category_grid .sasa-cgrid-body {
    padding: 16px 18px 20px;
}

.td_block_sasa_category_grid .sasa-cgrid-body .entry-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    color: #292929;
}

.td_block_sasa_category_grid .sasa-cgrid-body .entry-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.td_block_sasa_category_grid .sasa-cgrid-body .entry-title a:hover {
    color: #e74c3c;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
    .td_block_sasa_category_grid .sasa-cgrid-wrap {
        padding: 20px 16px;
        margin: 0 16px;
    }

    .td_block_sasa_category_grid .sasa-cgrid-posts {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 600px) {
    /* Background edge to edge — calc(-50vw + 50%) is more reliable than translateX */
    .td_block_sasa_category_grid .sasa-cgrid-wrap {
        border-radius: 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 20px 0 24px 16px; /* left padding visible on load */
    }

    .td_block_sasa_category_grid .sasa-cgrid-header {
        padding-right: 16px; /* right side of header */
        margin-bottom: 16px;
    }

    .td_block_sasa_category_grid .sasa-cgrid-cat-title {
        font-size: 18px;
    }

    /* Horizontal scroll row */
    .td_block_sasa_category_grid .sasa-cgrid-posts {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0;
        scrollbar-width: none;
    }

    .td_block_sasa_category_grid .sasa-cgrid-posts::-webkit-scrollbar {
        display: none;
    }

    /* Trailing spacer — padding-right gets clipped in scroll containers, ::after doesn't */
    .td_block_sasa_category_grid .sasa-cgrid-posts::after {
        content: '';
        flex: 0 0 16px;
    }

    .td_block_sasa_category_grid .td_module_sasa_category_grid {
        flex: 0 0 72vw;
        max-width: 280px;
        scroll-snap-align: start;
        margin-right: 0;
    }
}


/* =============================================================================
   Sasanews Custom Blocks — blocks.css
   Plugin: sasanews-blocks v1.0.0
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Block: td_block_sasa_featured_inverse
   Layout: left sidebar (40%) + right featured card (60%)
   Reuses all .td_block_sasa_featured module styles — only column widths differ.
   ----------------------------------------------------------------------------- */

/* Inherit the shared inner layout */
.td_block_sasa_featured_inverse .sasa-featured-inner {
    display: flex;
    gap: 16px;
    align-items: stretch;
    padding: 0 20px;
}

/* Left sidebar: 40% */
.td_block_sasa_featured_inverse .sasa-sidebar-left {
    flex: 0 0 40%;
    max-width: 40%;
    min-width: 0;
}

/* Right main card: fills remaining 60% */
.td_block_sasa_featured_inverse .sasa-main-right {
    flex: 1;
    min-width: 0;
}

/* Card + module styles are inherited from .td_block_sasa_featured rules
   since the same module classes are reused */

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .td_block_sasa_featured_inverse .sasa-featured-inner {
        gap: 12px;
        padding: 0 16px;
    }
}

@media (max-width: 900px) {
    .td_block_sasa_featured_inverse .sasa-sidebar-left {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

@media (max-width: 767px) {
    .td_block_sasa_featured_inverse .sasa-featured-inner {
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .td_block_sasa_featured_inverse .sasa-sidebar-left,
    .td_block_sasa_featured_inverse .sasa-main-right {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .td_block_sasa_featured_inverse .sasa-featured-inner {
        padding: 0 14px;
    }
}


/* -----------------------------------------------------------------------------
   Block: td_block_sasa_featured
   Layout: left card (60%) + right cards (40%)
   ----------------------------------------------------------------------------- */

.td_block_sasa_featured .sasa-featured-inner {
    display: flex;
    gap: 16px;
    align-items: stretch;   /* equal-height columns */
    padding: 0 20px;
}


/* --- Left column (featured post card) --------------------------------------- */

.td_block_sasa_featured .sasa-featured-main {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;           /* prevent flex blowout */
}

.sasa-featured-block .td_module_sasa_featured_main {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Text section inside left card */
.sasa-featured-block .sasa-card-text {
    padding: 20px 20px 16px;
}

/* Image flush at the bottom of the card */
.sasa-featured-block .sasa-main-image {
    margin-top: auto;
}

.sasa-featured-block .sasa-main-image a {
    display: block;
}

.sasa-featured-block .sasa-main-image img,
.sasa-featured-block .sasa-main-image .sasa-featured-img {
    width: 100%;
    height: auto;
    display: block;
}


/* --- Right column (sidebar cards) ------------------------------------------ */

.sasa-featured-block .sasa-featured-sidebar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Each sidebar post is its own card */
.sasa-featured-block .sasa-side-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* --- Category + date row (shared by both modules) --------------------------- */

.sasa-featured-block .sasa-cat-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* Category label */
.sasa-featured-block .sasa-cat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: #e74c3c;
    background: transparent;
    padding: 0;
    white-space: nowrap;
}

.sasa-featured-block .sasa-cat-label:hover {
    opacity: 0.75;
}

/* Date */
.sasa-featured-block .sasa-date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}


/* --- Featured post title ----------------------------------------------------- */

.sasa-featured-block .td_module_sasa_featured_main .entry-title {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 10px;
}

.sasa-featured-block .td_module_sasa_featured_main .entry-title a {
    color: #292929;
    text-decoration: none;
}

.sasa-featured-block .td_module_sasa_featured_main .entry-title a:hover {
    color: #e74c3c;
}

/* Excerpt */
.sasa-featured-block .sasa-excerpt {
    font-size: 18px;
    line-height: 1.4;
    color: #292929;
}

.sasa-featured-block .sasa-excerpt p {
    margin: 0;
}


/* --- Sidebar post titles ---------------------------------------------------- */

.sasa-featured-block .td_module_sasa_featured_side .entry-title {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}

.sasa-featured-block .td_module_sasa_featured_side .entry-title a {
    color: #292929;
    text-decoration: none;
}

.sasa-featured-block .td_module_sasa_featured_side .entry-title a:hover {
    color: #e74c3c;
}


/* --- Responsive ------------------------------------------------------------- */

/* Large tablet — tighten typography */
@media (max-width: 1024px) {
    .td_block_sasa_featured .sasa-featured-inner,
    .td_block_sasa_featured_inverse .sasa-featured-inner {
        gap: 12px;
        padding: 0 16px;
    }

    .sasa-featured-block .td_module_sasa_featured_main .entry-title {
        font-size: 20px;
    }

    .sasa-featured-block .sasa-card-text {
        padding: 16px 16px 12px;
    }

    .sasa-featured-block .sasa-side-card {
        padding: 14px 16px;
    }

    .sasa-featured-block .td_module_sasa_featured_side .entry-title {
        font-size: 14px;
    }
}

/* Small tablet — narrow the left column, keep two columns */
@media (max-width: 900px) {
    .td_block_sasa_featured .sasa-featured-main {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .sasa-featured-block .td_module_sasa_featured_main .entry-title {
        font-size: 18px;
    }

    .sasa-featured-block .sasa-excerpt {
        font-size: 13px;
    }
}

/* Mobile — single column stack */
@media (max-width: 767px) {
    .td_block_sasa_featured .sasa-featured-inner,
    .td_block_sasa_featured_inverse .sasa-featured-inner {
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .td_block_sasa_featured .sasa-featured-main,
    .td_block_sasa_featured_inverse .sasa-featured-main {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .sasa-featured-block .sasa-featured-sidebar {
        flex: none;
        width: 100%;
        gap: 10px;
    }

    .sasa-featured-block .td_module_sasa_featured_main {
        height: auto;
    }

    .sasa-featured-block .sasa-card-text {
        padding: 16px 16px 12px;
    }

    .sasa-featured-block .sasa-side-card {
        padding: 14px 16px;
        flex: none;
    }

    .sasa-featured-block .td_module_sasa_featured_main .entry-title {
        font-size: 20px;
    }

    .sasa-featured-block .td_module_sasa_featured_side .entry-title {
        font-size: 15px;
    }

    .sasa-featured-block .sasa-excerpt {
        font-size: 14px;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .sasa-featured-block .sasa-card-text {
        padding: 14px 14px 10px;
    }

    .sasa-featured-block .sasa-side-card {
        padding: 12px 14px;
    }

    .sasa-featured-block .td_module_sasa_featured_main .entry-title {
        font-size: 18px;
    }
}


/* =============================================================================
   Block: td_block_sasa_filter_bar
   ============================================================================= */

.sasa-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 20px;
}

.sasa-filter-pill {
    padding: 10px 22px;
    border-radius: 50px;
    border: none;
    background: #ebebeb;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1;
}

.sasa-filter-pill:hover {
    background: #ddd;
}

.sasa-filter-pill.is-active {
    background: #e74c3c;
    color: #fff;
}

/* Loading state */
.sasa-filter-loading {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

/* Hide all Composer blocks when a filter is active — body class approach.
   All tagDiv Composer blocks use .td_block_wrap as their outer class.
   The filter bar block itself is kept visible via the exception rule. */
body.sasa-filter-active .td_block_wrap {
    display: none !important;
}
body.sasa-filter-active .sasa-filter-bar-block {
    display: block !important;
}

/* Force vertical stacking — overrides any flex/grid inherited from tagDiv columns */
.sasa-filter-results,
.sasa-filter-posts {
    display: block !important;
    width: 100%;
}

/* Spacing between filter groups */
.sasa-filter-group {
    display: block !important;
    width: 100%;
    margin-bottom: 16px;
}

/* Load more button — sits right below the last post */
.sasa-filter-loadmore-wrap {
    text-align: center;
    padding: 8px 20px 8px;
}

.sasa-filter-loadmore {
    padding: 12px 40px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.sasa-filter-loadmore:hover {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .sasa-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 0 16px 16px;
        gap: 6px;
    }

    .sasa-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .sasa-filter-pill {
        font-size: 14px;
        padding: 8px 16px;
    }
}