/*
 * Recipetastic Responsive Overrides
 * Layers on top of style.css and sidebar.css — does not modify them.
 * Breakpoints: XL >1200 | LG <=1200 | MD <=992 | SM <=768 | XS <=576
 */

/* ============================================================
   GLOBAL: responsive images & box-sizing
   ============================================================ */
img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   Date archive: photo mosaic grid
   ============================================================ */
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 20px;
}

.mosaic-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #e8e8e8;
}

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

.mosaic-item:hover img {
    transform: scale(1.05);
}

.mosaic-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: rgba(85, 78, 70, 0.85);
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.mosaic-item:hover .mosaic-title {
    opacity: 1;
}


/* ============================================================
   LG: <= 1200px  (small laptops, landscape tablets)
   ============================================================ */
@media (max-width: 1200px) {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    #wrapper {
        width: 100%;
        max-width: 1200px;
        padding: 12px 15px;
    }

    .head {
        width: 100%;
    }

    #botmenu {
        width: 100%;
    }

    h1.logo {
        margin-left: 20px;
    }

    .fcred {
        width: 100%;
        padding: 0 15px;
    }

    #bottom {
        width: 100%;
        padding: 0 15px;
    }
}


/* ============================================================
   MD: <= 992px  (tablets portrait — sidebar collapses)
   ============================================================ */
@media (max-width: 992px) {

    /* Main content full width */
    #content,
    .content {
        float: none;
        width: 100%;
        margin: 20px 0 0 0;
        padding: 0 10px;
    }

    /* Sidebar stacks below content */
    .right {
        float: none !important;
        width: 100% !important;
        margin: 30px 0 0 0 !important;
        padding: 20px 10px 0 !important;
        display: block !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        border-top: 1px solid #e0e0e0;
        overflow: visible !important;
    }

    .sidebox {
        width: 100%;
    }

    .sidebox ul li {
        width: 100%;
    }

    .tabsdiv {
        width: 100%;
    }

    .featbox {
        width: 100%;
    }

    .fblock {
        width: 100%;
    }

    /* Header: logo + search stack */
    .head {
        height: auto;
        padding: 10px 15px;
    }

    #top {
        height: auto;
    }

    h1.logo {
        float: none;
        width: auto;
        margin: 10px auto;
        padding: 10px 0 0 80px;
        background-position: left center;
    }

    #search {
        float: none;
        width: 100%;
        margin: 10px 0;
        display: block;
    }

    #s {
        width: calc(100% - 40px);
    }

    /* Footer single-column */
    .botwid {
        float: none;
        width: 100%;
        margin: 20px 0 0 0;
    }

    .botwid ul li {
        width: 100%;
    }

    /* Recipe data */
    .ingred {
        width: 100%;
        float: none;
        margin-right: 0;
    }

    .bigbox {
        width: 100%;
    }

    .postimg {
        width: 150px;
        height: 150px;
    }

    /* Recipe grid: keep 3 columns — content is now full width */
    .third {
        margin-bottom: 15px;
    }

    .sorting.sort_alpha {
        width: 100%;
    }

    /* Tabs */
    .simpleTabs {
        padding: 0;
    }

    /* Mosaic: 3 columns */
    .mosaic-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Comments: reduce nesting indent */
    ol.commentlist li ul.children li.depth-2,
    ol.commentlist li ul.children li.depth-3,
    ol.commentlist li ul.children li.depth-4,
    ol.commentlist li ul.children li.depth-5 {
        margin-left: 25px;
    }
}


/* ============================================================
   SM: <= 768px  (large phones, small tablets)
   ============================================================ */
@media (max-width: 768px) {

    #wrapper {
        padding: 8px 10px;
    }

    /* Consistent inset for sliders, content, and sidebar */
    #casing {
        padding: 0 15px;
    }

    /* Hide only the second Smart Slider on mobile, keep the first */
    .n2-section-smartslider[data-ssid="5"],
    ss3-force-full-width:has([data-ssid="5"]) {
        display: none !important;
    }

    /* Post images scale down */
    .postimg {
        float: none;
        width: 100%;
        height: auto;
        padding: 0 0 10px 0;
    }

    /* Recipe grid still 2 columns but tighter */
    .third {
        width: 48%;
        padding: 10px 5px;
    }

    .recipe_thumb_small {
        width: 48%;
        margin: 0 2% 10px 0;
    }

    /* Mosaic: 2 columns */
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .mosaic-title {
        font-size: 12px;
        padding: 6px 8px;
    }

    /* Comment form full-width inputs */
    #commentform input {
        width: 100%;
    }

    textarea#comment {
        width: 100%;
    }

    /* Navigation menu items */
    #botmenu {
        height: auto;
    }

    #submenu {
        width: 100%;
        height: auto;
        margin: 0;
    }

    #submenu li {
        float: none;
    }

    #submenu li:last-child {
        float: none;
        margin-right: 0;
    }

    #submenu li a {
        padding: 10px;
    }

    /* Search page */
    #searchpage {
        margin: 0 5px;
    }

    #sform {
        width: 100%;
    }

    /* Cover/entry */
    .cover {
        width: 100%;
        float: none;
    }

    /* Email form */
    #emailForm input,
    #emailForm textarea {
        width: 100%;
    }

    /* Sort control */
    #sort {
        float: none;
        margin-right: 0;
        margin-top: 10px;
        display: block;
    }

    h1.pagetitle {
        font-size: 32px;
    }

    /* Sidebar thumbnail images */
    img.thumbim {
        width: 80px;
        height: 80px;
    }

    /* Comments: further reduce indent */
    ol.commentlist li ul.children li.depth-2,
    ol.commentlist li ul.children li.depth-3,
    ol.commentlist li ul.children li.depth-4,
    ol.commentlist li ul.children li.depth-5 {
        margin-left: 15px;
    }
}


/* ============================================================
   XS: <= 576px  (small phones)
   ============================================================ */
@media (max-width: 576px) {

    #wrapper {
        padding: 5px 8px;
    }

    /* Consistent inset for sliders, content, and sidebar */
    #casing {
        padding: 0 12px;
    }

    /* Force Smart Slider to match content width */
    .n2-section-smartslider .n2-ss-margin {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Logo: keep legible on mobile */
    h1.logo {
        font-size: 32px;
        margin: 10px 0;
        padding: 10px 0 0 80px;
        width: 100%;
        max-width: 400px;
        height: 60px;
        background-size: contain;
        background-position: left center;
    }

    /* Recipe grid: keep 2 columns on small phones */
    .third {
        width: 48%;
        float: left;
        padding: 10px 1%;
    }

    .recipe_thumb_small {
        width: 48%;
        float: left;
        height: auto;
        margin: 0 2% 10px 0;
    }

    .recipe_title_small {
        width: 48%;
        text-align: center;
    }

    /* Mosaic: 2 columns tighter */
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    .mosaic-title {
        font-size: 11px;
        padding: 4px 6px;
    }

    /* Tabs: scrollable horizontal */
    ul.simpleTabsNavigation {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }

    ul.simpleTabsNavigation li {
        flex-shrink: 0;
    }

    /* Title sizing */
    .title h2 {
        font-size: 22px;
    }

    h1.pagetitle {
        font-size: 26px;
    }

    .simpleTabsContent > h2 {
        font-size: 22px;
    }

    /* Recipe sections */
    .reciphead,
    .recipfoot {
        padding: 6px 10px;
    }

    .reciphead span {
        font-size: 18px;
    }

    /* Post meta wrapping */
    .postmeta {
        line-height: 22px;
    }

    .postmeta span {
        display: inline-block;
        margin-bottom: 3px;
    }

    /* Comments: minimal indent */
    ol.commentlist li ul.children li.depth-2,
    ol.commentlist li ul.children li.depth-3,
    ol.commentlist li ul.children li.depth-4,
    ol.commentlist li ul.children li.depth-5 {
        margin-left: 10px;
    }

    ol.commentlist li {
        padding: 8px;
    }

    /* Footer */
    .fcred {
        font-size: 10px;
        line-height: 14px;
    }

    /* Search full width */
    #search {
        width: 100%;
        margin: 10px 0;
    }

    #s {
        width: calc(100% - 40px);
    }

    /* Wider banner */
    .widebanner {
        height: auto;
    }

    /* Square banners stack */
    .squarebanner ul li {
        float: none;
        display: block;
        margin: 10px auto;
    }
}