/*
 * RESPONSIVE RULES
 * 
 * Mobile First is handled by Bootstrap grid defaults.
 * These are overrides for specific breakpoints.
 */

/* ==================================
   MOBILE ( < 768px )
   ================================== */
@media (max-width: 767.98px) {

    /* Sticky Bottom Share Bar (Mobile Only) */
    .hnp-mobile-share-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ddd;
        padding: 10px;
        z-index: 1000;
        display: flex;
        justify-content: space-around;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Typography Scaling */
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Hide non-essential elements */
    .hnp-topbar {
        display: none;
    }

    /* Adjust Header */
    .hnp-logo h1 {
        font-size: 2rem;
    }

    /* Featured Image Height */
    .hnp-featured-card {
        height: 250px;
    }

    /* Footer Stack */
    .hnp-footer .col-lg-2,
    .hnp-footer .col-lg-3,
    .hnp-footer .col-lg-4 {
        text-align: center;
    }

    .hnp-footer h5 {
        display: inline-block;
        /* Center underline */
    }
}

/* ==================================
   TABLET ( 768px - 991px )
   ================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 2 Column Adjustments handled by col-md-6 */

    .hnp-featured-card {
        height: 350px;
    }
}

/* ==================================
   DESKTOP ( > 992px )
   ================================== */
@media (min-width: 992px) {
    /* Large screens adjustments */
}