/*
Theme Name:   Inspiro Child
Theme URI:    http://tsvetephotography.com/
Description:  Tsvete Photography — child theme for Inspiro.
Author:       Tsvete Photography
Template:     inspiro
Version:      1.2.0
Text Domain:  inspiro-child
*/

/* ============================================================
   TABLE OF CONTENTS
   -------------------------------------------------------
   1.  Design Tokens (CSS Variables)
   2.  Global Reset & Base
   3.  Navigation
   4.  Homepage — Hide Hero & Section Header
   5.  Homepage — Portfolio Grid
   6.  Portfolio Single Pages — Header
   7.  Portfolio Single Pages — Image Grid
   8.  Footer
   9.  Responsive
   ============================================================ */


/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {
    /* Core palette */
    --ts-bg:            #0c0c0b;
    --ts-bg-tile:       #141413;
    --ts-gap:           3px;

    /* Text */
    --ts-text:          rgba(255, 255, 255, 0.88);
    --ts-text-mid:      rgba(255, 255, 255, 0.50);
    --ts-text-subtle:   rgba(255, 255, 255, 0.32);

    /* Tile interaction */
    --ts-overlay:       rgba(0, 0, 0, 0.52);
    --ts-scale:         1.05;
    --ts-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Typography */
    --ts-font:          'Inter', -apple-system, sans-serif;
    --ts-font-display:  'Georgia', 'Times New Roman', serif;

    /* Override Inspiro primary colour */
    --inspiro-primary-color:        #1c1c1c;
    --inspiro-dark-color:           #0d0d0d;
    --inspiro-color-background-body: var(--ts-bg);
    --inspiro-color-link-hover:     rgba(255, 255, 255, 0.72);
}


/* ============================================================
   2. Global Reset & Base
   ============================================================ */
html,
body {
    background-color: var(--ts-bg) !important;
    color: var(--ts-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove all Inspiro page padding from main content areas */
.site-content,
.site-content-contain,
#content,
.site-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Scrollbar — dark */
::-webkit-scrollbar            { width: 6px; background: var(--ts-bg); }
::-webkit-scrollbar-thumb      { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.22); }


/* ============================================================
   3. Navigation
   ============================================================ */
.site-header,
#masthead,
#site-navigation,
.navbar,
.headroom {
    background-color: var(--ts-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

/* Inner wrapper — compact height */
.header-inner {
    padding: 8px 28px !important;
}

/* Logo / site name — broad targeting to catch all Inspiro logo variants */
.header-logo-wrapper .site-title a,
.header-logo-wrapper .site-title,
.header-logo-wrapper a,
.header-logo-wrapper p,
.custom-logo-link,
#site-navigation .site-title,
#site-navigation .site-title a,
.site-title,
.site-title a,
.navbar .site-title,
.navbar .site-title a {
    font-family: var(--ts-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--ts-text) !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* Catch any bold/heading tags used as logo text */
.header-logo-wrapper h1,
.header-logo-wrapper h2,
.header-logo-wrapper strong {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--ts-text) !important;
    margin: 0 !important;
}

/* Primary nav links */
.primary-menu-wrapper .nav > li > a,
.primary-menu-wrapper .sf-menu > li > a {
    font-family: var(--ts-font) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ts-text-subtle) !important;
    padding: 0 !important;
    background: transparent !important;
}

.primary-menu-wrapper .nav > li > a:hover,
.primary-menu-wrapper .sf-menu > li > a:hover {
    color: var(--ts-text-mid) !important;
    background: transparent !important;
}

/* Hamburger toggle lines */
.navbar-toggle .icon-bar {
    background-color: var(--ts-text) !important;
    width: 20px !important;
    height: 1px !important;
    border-radius: 0 !important;
    margin: 5px 0 !important;
}

.navbar-toggle {
    background: transparent !important;
    border: none !important;
}

/* Search icon */
.sb-search-submit,
.sb-search-input {
    background: var(--ts-bg) !important;
    color: var(--ts-text) !important;
    border-color: rgba(255,255,255,0.12) !important;
}


/* ============================================================
   4. Homepage — Hide Hero & Section Header
   ============================================================ */

/* Remove hero image entirely on the homepage */
.home .custom-header,
.home .hero-header,
.home #scroll-to-content {
    display: none !important;
}

/* Remove the "Portfolios" title + description block */
.home .withsmallpadding.ppb_header,
.home .ppb_header {
    display: none !important;
}

/* Remove all spacing around the portfolio section */
.home .ppb_portfolio,
.home .ppb_portfolio.one.nopadding {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Remove Inspiro's article / entry padding */
.home .hentry,
.home .entry-content,
.home article.page {
    padding: 0 !important;
    margin: 0 !important;
}


/* ============================================================
   5. Homepage — Portfolio Grid
   ============================================================ */

/* Grid container — override three_cols float layout */
.home .portfolio_filter_wrapper,
.home .portfolio-content {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--ts-gap) !important;
    padding: var(--ts-gap) !important;
    padding-top: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    overflow: visible !important;
}

/* Individual tile */
.home .portfolio_type,
.home .one_third.portfolio_type,
.home .one_fourth.portfolio_type {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 3 / 2 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--ts-bg-tile) !important;
    cursor: pointer !important;
}

/* Wide tile — every 5th starting at 1 */
.home .portfolio_type:nth-child(5n + 1) {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 9 !important;
}

/* Image — fills the tile completely */
.home .portfolio_type img,
.home .portfolio_type img.aligncenter {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    transition: transform 0.7s var(--ts-ease) !important;
    will-change: transform !important;
}

/* Any anchor wrapping the image */
.home .portfolio_type a {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
}

/* Hover — scale image */
.home .portfolio_type:hover img {
    transform: scale(var(--ts-scale)) !important;
}

/* Dark overlay — appears on hover */
.home .portfolio_type::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    transition: background 0.4s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.home .portfolio_type:hover::after {
    background: var(--ts-overlay) !important;
}

/* Title — revealed on hover */
.home .portfolio_title {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 14px 16px !important;
    font-family: var(--ts-font) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0) !important;
    transition: color 0.35s ease !important;
    z-index: 2 !important;
    background: transparent !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
}

.home .portfolio_type:hover .portfolio_title {
    color: rgba(255, 255, 255, 0.92) !important;
}


/* ============================================================
   6. Portfolio Single Pages — Header
   ============================================================ */

/* Page background */
.portfolios-template-default,
.single-portfolios {
    background-color: var(--ts-bg) !important;
}

/* Featured image at top — full width, no gap */
.portfolios-template-default .entry-cover-image,
.portfolios-template-default .single-featured-image-header {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

.portfolios-template-default .entry-cover-image img,
.portfolios-template-default .single-featured-image-header img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-height: 80vh !important;
    object-fit: cover !important;
}

/* Portfolio title block */
.portfolios-template-default .ppb_header,
.portfolios-template-default .withsmallpadding {
    text-align: center !important;
    padding: 48px 24px 40px !important;
    margin: 0 0 40px !important;
    background: var(--ts-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.portfolios-template-default .ppb_title,
.portfolios-template-default h2.ppb_title {
    font-family: var(--ts-font-display) !important;
    font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: var(--ts-text) !important;
    margin: 0 !important;
}

.portfolios-template-default .ppb_subtitle {
    font-family: var(--ts-font) !important;
    font-size: 9px !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: var(--ts-text-subtle) !important;
    margin-bottom: 0.5em !important;
}

/* Remove article padding */
.portfolios-template-default .hentry,
.portfolios-template-default .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Standard wrapper — zero out default stacking layout */
.portfolios-template-default .standard_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}


/* ============================================================
   7. Portfolio Single Pages — Image Grid (built by JS)
   ============================================================ */

/* Grid container injected by portfolio-lightbox.js */
.ts-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ts-gap);
    padding: 0 24px 48px;
    background: var(--ts-bg);
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

/* Individual tile */
.ts-portfolio-grid .standard_wrapper {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 3 / 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--ts-bg-tile) !important;
}

/* Wide tiles */
.ts-portfolio-grid .standard_wrapper.ts-wide {
    grid-column: span 2;
    aspect-ratio: 16 / 9 !important;
}

/* The lightbox anchor */
.ts-portfolio-grid a.ts-lightbox-trigger {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    line-height: 0 !important;
    z-index: 2 !important;
}

/* Image fills tile */
.ts-portfolio-grid .img_frame {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.ts-portfolio-grid img.portfolio_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.7s var(--ts-ease) !important;
    will-change: transform !important;
    cursor: zoom-in !important;
    margin: 0 !important;
}

/* Hover scale */
.ts-portfolio-grid .standard_wrapper:hover img.portfolio_img {
    transform: scale(1.04) !important;
}

/* Dark overlay on hover */
.ts-portfolio-grid .standard_wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.ts-portfolio-grid .standard_wrapper:hover::after {
    background: rgba(0, 0, 0, 0.25);
}


/* ============================================================
   8. Footer
   ============================================================ */
.site-footer,
#colophon {
    background: var(--ts-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: var(--ts-text-subtle) !important;
    padding: 28px 0 !important;
}

.site-info,
.site-footer a {
    font-family: var(--ts-font) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    color: var(--ts-text-subtle) !important;
}

.site-footer a:hover {
    color: var(--ts-text-mid) !important;
}


/* ============================================================
   9. Responsive
   ============================================================ */

/* Tablet */
@media screen and (max-width: 900px) {

    .home .portfolio_filter_wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Recalculate wide tiles for 3-col */
    .home .portfolio_type:nth-child(5n + 1) {
        grid-column: span 2 !important;
        aspect-ratio: 16 / 9 !important;
    }

    .ts-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ts-portfolio-grid .standard_wrapper.ts-wide {
        grid-column: span 2;
    }
}

/* Mobile */
@media screen and (max-width: 600px) {

    .home .portfolio_filter_wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
    }

    /* On mobile, all tiles same size */
    .home .portfolio_type:nth-child(5n + 1) {
        grid-column: span 1 !important;
        aspect-ratio: 3 / 2 !important;
    }

    /* Show titles always on touch devices */
    .home .portfolio_title {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 8px !important;
        padding: 10px 10px !important;
    }

    .home .portfolio_type::after {
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .ts-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        padding: 0 12px 32px;
    }

    .ts-portfolio-grid .standard_wrapper.ts-wide {
        grid-column: span 2;
    }

    .portfolios-template-default .ppb_header {
        padding: 32px 16px 28px !important;
        margin-bottom: 28px !important;
    }
}