/*
Theme Name: Blocksy ThoughtStuff
Theme URI: https://blog.thoughtstuff.co.uk
Description: Blocksy child theme configured to match the ThoughtStuff blog design — clean 2-column layout with wide thin banner featured images.
Author: Tom Morgan
Author URI: https://blog.thoughtstuff.co.uk
Template: blocksy
Version: 1.0.16
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   ThoughtStuff Banner Logo — displayed above the header on all pages
   ========================================================================== */

.thoughtstuff-banner {
    text-align: center;
    background: #ffffff;
    padding: 20px 0 10px;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thoughtstuff-banner-logo {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .thoughtstuff-banner {
        padding: 15px 10px 8px;
    }

    .thoughtstuff-banner-logo {
        max-width: 90%;
    }
}

/* ==========================================================================
   Featured Image Banner — wide thin crop matching Lucid's 960x210 style
   ========================================================================== */

/*
 * Single post: force featured image to a wide-thin banner (~4.5:1 ratio).
 * Lucid used 960x210 on single posts; we scale this to modern widths.
 */
.single .ct-featured-image {
    max-height: 280px;
    overflow: hidden;
}

.single .ct-featured-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
}

/*
 * Blog index / archive: show full featured image without cropping.
 * Blocksy sets aspect-ratio as an inline style on the <img> element
 * and uses display:inline-flex on the container. Override everything.
 */
.ct-media-container,
a.ct-media-container,
figure.ct-media-container {
    aspect-ratio: unset !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

.ct-media-container::before {
    display: none !important;
    padding-bottom: 0 !important;
}

.ct-media-container img,
.ct-media-container picture img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    position: relative !important;
    aspect-ratio: auto !important;
}

/* ==========================================================================
   Meta info bar — subtle grey background matching Lucid's post meta style
   ========================================================================== */

.entry-meta {
    color: #b8b8b8;
    font-size: 14px;
}

.entry-meta a {
    color: #888888;
}

.entry-meta a:hover {
    color: #4c4c4c;
}

/* ==========================================================================
   Card-style entries on blog index — wide 1-column list layout
   ========================================================================== */

.entries > article {
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #ffffff;
    margin-bottom: 30px;
}

/* Ensure single-column grid doesn't leave excessive whitespace */
.entries[data-layout="grid"] {
    max-width: 100%;
}

/* ==========================================================================
   Sidebar widget styling — match Lucid's bordered widget boxes
   ========================================================================== */

.ct-sidebar .ct-widget {
    border: 1px solid #e5e5e5;
    background: #ffffff;
    border-radius: 3px;
}

.ct-sidebar .widget-title {
    background: #f9f9f9;
    padding: 12px 15px;
    margin: -1px -1px 15px -1px;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 3px 3px 0 0;
    font-size: 16px;
    color: #4c4c4c;
}