/* ==========================================================================
 * CUSTOM.CSS — narozniki-z-funkcja-spania.pl
 * Soledad Fashion Forward 1:1 — accent #c87932, DM Serif Text
 * Site-specific: header, hero, sections, footer
 *
 * @author  Damian Zięba <biuro@semtak.pl>
 * @link    https://semtak.pl
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Header — 2-row: top (hamburger | logo | search) + nav bar
 * ----------------------------------------------------------------------- */
.stb-header {
    background: var(--color-bg);
    position: relative;
    z-index: 1000;
}

/* Top row — logo centered, hamburger left, search right */
.stb-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    position: relative;
}

.stb-header-top .stb-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hamburger (mobile toggle) — hidden on desktop */
.stb-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.stb-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-heading);
    transition: all var(--transition-normal);
}

/* Logo — centered */
.stb-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.stb-logo-link {
    display: inline-block;
    color: var(--color-heading);
}

.stb-logo-link:hover {
    color: var(--color-heading);
}

.stb-logo .custom-logo {
    max-height: 50px;
    width: auto;
}

.stb-logo-text {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-heading);
    white-space: nowrap;
}

.stb-logo-bold {
    font-weight: 700;
}

.stb-logo-italic {
    font-style: italic;
    font-weight: 400;
}

/* Search button — right side */
.stb-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-heading);
    font-size: 16px;
    transition: color var(--transition-fast);
    flex-shrink: 0;
    margin-left: auto;
}

.stb-search-toggle:hover {
    color: var(--color-accent);
}

.stb-search-toggle svg {
    width: 18px;
    height: 18px;
}

/* Nav bar — border top AND bottom */
.stb-nav-bar {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    position: relative;
    z-index: 999;
}

.stb-nav-bar .stb-container {
    display: flex;
    justify-content: center;
}

.stb-nav-list {
    display: flex;
    align-items: center;
    gap: 0;
}

.stb-nav-list > li {
    position: relative;
}

.stb-nav-list > li > a {
    display: block;
    padding: 0 16px;
    font-family: var(--font-menu);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: var(--nav-height);
    color: var(--color-heading);
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.stb-nav-list > li > a:hover,
.stb-nav-list > li.current-menu-item > a,
.stb-nav-list > li.current-menu-ancestor > a {
    color: var(--color-accent);
}

/* Sub-menu dropdown */
.stb-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: 1000;
}

.stb-nav-list > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stb-nav-list .sub-menu li a {
    display: block;
    padding: 10px 20px;
    font-family: var(--font-menu);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.stb-nav-list .sub-menu li:last-child a {
    border-bottom: none;
}

.stb-nav-list .sub-menu li a:hover {
    color: var(--color-accent);
    padding-left: 24px;
}

/* Nav sticky on scroll */
.stb-nav-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-header);
    z-index: 1000;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Mobile menu */
.stb-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 998;
    max-height: 70vh;
    overflow-y: auto;
}

.stb-mobile-menu.stb-menu-open {
    display: block;
}

.stb-mobile-menu .stb-mobile-nav-list {
    list-style: none;
    padding: var(--sp-12) 0;
}

.stb-mobile-menu .stb-mobile-nav-list li a {
    display: block;
    padding: var(--sp-12) var(--sp-24);
    font-family: var(--font-menu);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-heading);
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition-fast);
}

.stb-mobile-menu .stb-mobile-nav-list li a:hover {
    color: var(--color-accent);
}

.stb-mobile-menu .stb-mobile-nav-list .sub-menu {
    list-style: none;
}

.stb-mobile-menu .stb-mobile-nav-list .sub-menu li a {
    padding-left: var(--sp-48);
    font-weight: 400;
    font-size: 13px;
    text-transform: none;
}

/* Mobile overlay (backdrop behind menu) */
.stb-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 997;
}

/* --------------------------------------------------------------------------
 * 2. Search Overlay
 * ----------------------------------------------------------------------- */
#search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

#search-overlay.active {
    display: flex;
}

.stb-search-overlay-inner {
    width: 100%;
    max-width: 600px;
    padding: 0 var(--sp-24);
    position: relative;
}

.stb-search-overlay-inner input[type="search"] {
    width: 100%;
    padding: var(--sp-16) 0;
    font-family: var(--font-heading);
    font-size: 24px;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    outline: none;
    transition: border-color var(--transition-fast);
}

.stb-search-overlay-inner input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.stb-search-overlay-inner input[type="search"]:focus {
    border-bottom-color: var(--color-accent);
}

.stb-search-overlay-close {
    position: absolute;
    top: -60px;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.stb-search-overlay-close:hover {
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
 * 3. Hero Section
 * ----------------------------------------------------------------------- */
.stb-hero {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: var(--sp-32);
}

/* Hero slides container */
.stb-hero-slides {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.stb-hero-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1;
}

.stb-hero-main--active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.stb-hero-main-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 390px;
    overflow: hidden;
}

.stb-hero-main a {
    display: block;
    position: relative;
    max-height: 400px;
    overflow: hidden;
}

.stb-hero-main img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.stb-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-48) var(--sp-32) var(--sp-32);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.stb-hero-overlay .stb-hero-cat {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--color-accent);
    padding: 3px 8px;
    margin-bottom: var(--sp-12);
    align-self: flex-start;
}

.stb-hero-overlay .stb-hero-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    max-width: 700px;
}

.stb-hero-overlay .stb-hero-title a {
    color: #fff;
}

.stb-hero-overlay .stb-hero-title a:hover {
    opacity: 0.85;
}

/* Hero — small posts row below */
.stb-hero-posts {
    display: flex;
    gap: var(--sp-24);
    padding: var(--sp-24) 0;
    border-bottom: 1px solid var(--color-border);
}

/* Hero nav item — vertical: image top, cat+date row, title below */
.stb-hero-post-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    border-bottom: 3px solid transparent;
    transition: border-color 0.3s ease;
    padding-bottom: var(--sp-12);
    flex: 1;
}

.stb-hero-post-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: block;
}

.stb-hero-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-hero-post-item:hover .stb-hero-post-thumb img {
    transform: scale(1.05);
}

.stb-hero-post-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.stb-hero-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stb-hero-post-cat {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
}

.stb-hero-post-date {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--color-meta);
}

.stb-hero-post-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-heading);
}

/* Active nav thumbnail */
.stb-hero-post-item--active {
    border-bottom-color: var(--color-accent);
}

.stb-hero-post-item--active .stb-hero-post-title {
    color: var(--color-accent);
}

/* Hero progress bar — top of image, scoped to slides container */
.stb-hero-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 10;
    background: rgba(255,255,255,0.25);
}

.stb-hero-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    transition: none;
}

.stb-hero-progress-bar.stb-hero-progress-bar--running {
    width: 100%;
    transition: width 5s linear;
}

/* --------------------------------------------------------------------------
 * 4. Category Cards (3-column)
 * ----------------------------------------------------------------------- */
.stb-cat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-32);
    padding: var(--sp-32) 0;
}

.stb-cat-card {
    overflow: hidden;
}

.stb-cat-card-thumb {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.stb-cat-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-cat-card:hover .stb-cat-card-thumb img {
    transform: scale(1.05);
}

.stb-cat-card-body {
    padding: var(--sp-24) var(--sp-4);
}

.stb-cat-card-body h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--sp-8);
    line-height: 1.3;
}

.stb-cat-card-body h3 a {
    color: inherit;
}

.stb-cat-card-body h3 a:hover {
    color: var(--color-accent);
}

.stb-cat-card-body p {
    font-size: 14px;
    color: var(--color-meta);
    line-height: 1.65;
    margin-bottom: var(--sp-12);
}

.stb-cat-card-link {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.stb-cat-card-link:hover {
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
 * 5. Section Titles — Soledad style-4 (border-arrow, centered)
 * ----------------------------------------------------------------------- */
.stb-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-24);
    margin-bottom: var(--sp-24);
    margin-top: 0;
}

.stb-section-title::before,
.stb-section-title::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--color-border);
}

.stb-section-title span {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-heading);
    white-space: nowrap;
    position: relative;
}

/* Arrow decoration after title text */
.stb-section-title span::after {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--color-accent);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.stb-section-title--left {
    justify-content: flex-start;
}

.stb-section-title--left::before {
    display: none;
}

/* Light variant — for use on dark backgrounds */
.stb-section-title--light::before,
.stb-section-title--light::after {
    border-top-color: #333;
}

.stb-section-title--light span {
    color: #fff;
}

/* Dark section variant */
.stb-dark-section .stb-section-title::before,
.stb-dark-section .stb-section-title::after {
    border-top-color: #333;
}

.stb-dark-section .stb-section-title span {
    color: #fff;
}

/* --------------------------------------------------------------------------
 * 6. Latest Articles Section — 2 large + 4 small
 * ----------------------------------------------------------------------- */
.stb-latest-section {
    padding: var(--sp-16) 0 var(--sp-32);
}

.stb-latest-row-large {
    display: flex;
    gap: var(--sp-32);
    margin-bottom: var(--sp-32);
}

.stb-card-featured {
    flex: 1;
    min-width: 0;
}

.stb-card-featured .stb-card-thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: var(--sp-16);
}

.stb-card-featured .stb-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-card-featured:hover .stb-card-thumb img {
    transform: scale(1.05);
}

.stb-card-featured .stb-card-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    margin-bottom: var(--sp-8);
}

.stb-card-featured .stb-card-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-heading);
    margin-bottom: var(--sp-8);
}

.stb-card-featured .stb-card-title a {
    color: inherit;
}

.stb-card-featured .stb-card-title a:hover {
    color: var(--color-accent);
}

.stb-card-featured .stb-card-meta {
    font-size: 13px;
    color: var(--color-meta);
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.stb-card-featured .stb-card-meta a {
    color: var(--color-meta);
}

.stb-card-featured .stb-card-meta a:hover {
    color: var(--color-accent);
}

/* Small cards row — 4 columns */
.stb-latest-row-small {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-24);
}

.stb-card-small {
    min-width: 0;
}

.stb-card-small .stb-card-thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: var(--sp-12);
    position: relative;
}

.stb-card-small .stb-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-card-small:hover .stb-card-thumb img {
    transform: scale(1.05);
}

.stb-card-small .stb-card-thumb .stb-cat-badge {
    position: absolute;
    bottom: var(--sp-8);
    left: var(--sp-8);
}

.stb-card-small .stb-card-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-heading);
    margin-bottom: var(--sp-4);
}

.stb-card-small .stb-card-title a {
    color: inherit;
}

.stb-card-small .stb-card-title a:hover {
    color: var(--color-accent);
}

.stb-card-small .stb-card-date {
    font-size: 12px;
    color: var(--color-meta);
}

/* --------------------------------------------------------------------------
 * 7. Dark Featured Section
 * ----------------------------------------------------------------------- */
.stb-dark-section {
    background: var(--color-dark-section);
    padding: var(--sp-60) 0;
    color: #fff;
}

.stb-dark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-24);
}

.stb-dark-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.stb-dark-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

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

.stb-dark-item .stb-dark-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-24);
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.75) 100%);
}

.stb-dark-item .stb-dark-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    margin-bottom: var(--sp-8);
}

.stb-dark-item .stb-dark-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
}

.stb-dark-item .stb-dark-title a {
    color: #fff;
}

.stb-dark-item .stb-dark-title a:hover {
    opacity: 0.8;
}

.stb-dark-item .stb-dark-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--sp-8);
}

/* --------------------------------------------------------------------------
 * 8. Carousel Section (Swiper)
 * ----------------------------------------------------------------------- */
.stb-carousel-section {
    padding: var(--sp-48) 0;
    overflow: hidden;
}

.stb-carousel-section .swiper {
    overflow: visible;
}

.stb-carousel-section .swiper-slide {
    width: 280px;
}

.stb-carousel-item {
    cursor: grab;
}

.stb-carousel-item .stb-carousel-thumb {
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--sp-12);
}

.stb-carousel-item .stb-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-carousel-item:hover .stb-carousel-thumb img {
    transform: scale(1.05);
}

.stb-carousel-item .stb-carousel-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-heading);
    margin-bottom: var(--sp-4);
}

.stb-carousel-item .stb-carousel-title a {
    color: inherit;
}

.stb-carousel-item .stb-carousel-title a:hover {
    color: var(--color-accent);
}

.stb-carousel-item .stb-carousel-date {
    font-size: 12px;
    color: var(--color-meta);
}

/* Swiper navigation */
.stb-carousel-section .swiper-button-next,
.stb-carousel-section .swiper-button-prev {
    width: 44px;
    height: 44px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-heading);
    transition: all var(--transition-fast);
}

.stb-carousel-section .swiper-button-next::after,
.stb-carousel-section .swiper-button-prev::after {
    font-size: 14px;
    font-weight: 700;
}

.stb-carousel-section .swiper-button-next:hover,
.stb-carousel-section .swiper-button-prev:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
 * 9. Latest Posts Grid — 3x2 compact
 * ----------------------------------------------------------------------- */
.stb-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-24);
    padding: var(--sp-48) 0;
}

.stb-latest-grid-item {
    display: flex;
    gap: var(--sp-16);
    align-items: flex-start;
}

.stb-latest-grid-thumb {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
}

.stb-latest-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-latest-grid-item:hover .stb-latest-grid-thumb img {
    transform: scale(1.05);
}

.stb-latest-grid-info {
    flex: 1;
    min-width: 0;
}

.stb-latest-grid-cat {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    margin-bottom: var(--sp-4);
    display: block;
}

.stb-latest-grid-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-heading);
    margin-bottom: var(--sp-4);
}

.stb-latest-grid-title a {
    color: inherit;
}

.stb-latest-grid-title a:hover {
    color: var(--color-accent);
}

.stb-latest-grid-date {
    font-size: 12px;
    color: var(--color-meta);
}

/* --------------------------------------------------------------------------
 * 9b. "Mogą Ci się spodobać" — overlay grid (single.php)
 * ----------------------------------------------------------------------- */
.stb-you-may-like {
    margin-top: var(--sp-48);
    padding-top: var(--sp-32);
    border-top: 1px solid var(--color-border);
}

.stb-you-may-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-24);
}

.stb-you-may-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.stb-you-may-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-you-may-item:hover img {
    transform: scale(1.05);
}

.stb-you-may-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-16);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.stb-you-may-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
}

.stb-you-may-title a {
    color: #fff;
}

@media (max-width: 768px) {
    .stb-you-may-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stb-you-may-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
 * 10. Footer
 * ----------------------------------------------------------------------- */
.stb-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: var(--sp-60) 0 0;
}

.stb-footer a {
    color: var(--color-footer-text);
    transition: color var(--transition-fast);
}

.stb-footer a:hover {
    color: #fff;
}

.stb-footer-center {
    text-align: center;
    padding-bottom: var(--sp-48);
}

/* Footer logo */
.stb-footer-logo {
    font-family: var(--font-heading);
    font-size: 24px;
    color: #fff;
    margin-bottom: var(--sp-16);
    display: inline-block;
}

.stb-footer-logo:hover {
    color: #fff;
}

.stb-footer-logo .stb-logo-bold {
    font-weight: 700;
}

.stb-footer-logo .stb-logo-italic {
    font-style: italic;
    font-weight: 400;
}

.stb-footer-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-footer-text);
    margin-bottom: var(--sp-24);
    max-width: 500px;
}

/* Footer contact */
.stb-footer-contact {
    list-style: none;
    padding: 0;
    margin: var(--sp-16) 0;
    font-size: 14px;
}

.stb-footer-contact li {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin-bottom: var(--sp-8);
}

.stb-footer-contact svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.stb-footer-contact a {
    color: var(--color-footer-text);
}

.stb-footer-contact a:hover {
    color: #fff;
}

/* Footer logo link */
.stb-footer-logo-text {
    color: #fff;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 24px;
    display: inline-block;
}

.stb-footer-logo-text:hover {
    color: #fff;
}

/* Footer links — inline centered with | separators */
.stb-footer-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: var(--sp-16) 0 0;
}

.stb-footer-links ul li {
    display: flex;
    align-items: center;
}

.stb-footer-links ul li::after {
    content: '|';
    margin: 0 var(--sp-12);
    color: var(--color-footer-border);
    font-size: 12px;
}

.stb-footer-links ul li:last-child::after {
    display: none;
}

.stb-footer-links ul li a {
    font-size: 13px;
    color: var(--color-footer-text);
    transition: color var(--transition-fast);
}

.stb-footer-links ul li a:hover {
    color: #fff;
}

/* Footer widget area */
.stb-footer-widget .stb-widget-title {
    color: #fff;
    border-bottom-color: var(--color-footer-border);
}

.stb-footer-widget .stb-widget-title::after {
    border-left-color: var(--color-accent);
}

.stb-footer-widget .stb-widget-post {
    border-bottom-color: var(--color-footer-border);
}

.stb-footer-widget .stb-widget-post-title {
    color: var(--color-footer-text);
}

.stb-footer-widget .stb-widget-post-title a {
    color: var(--color-footer-text);
}

.stb-footer-widget .stb-widget-post-title a:hover {
    color: #fff;
}

.stb-footer-widget .stb-widget-post-date {
    color: #666;
}

/* Footer copyright */
.stb-footer-copyright {
    margin-top: var(--sp-24);
    padding-top: var(--sp-24);
    border-top: 1px solid var(--color-footer-border);
    font-size: 13px;
    color: var(--color-footer-text);
}

.stb-footer-copyright {
    font-size: 13px;
    color: var(--color-footer-text);
}

.stb-footer-credit {
    font-size: 13px;
    color: var(--color-footer-text);
}

.stb-footer-credit a {
    color: var(--color-footer-text);
}

.stb-footer-credit a:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
 * 11. Archive Mixed Layout
 * ----------------------------------------------------------------------- */
.stb-archive-mixed {
    margin-bottom: var(--sp-32);
}

/* Alternating section — 2-col grid */
.stb-archive-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-32);
    margin-bottom: var(--sp-32);
}

.stb-archive-grid-row .stb-card {
    flex: 0 0 calc(50% - 16px);
    max-width: calc(50% - 16px);
    margin-bottom: 0;
}

/* Large centered post */
.stb-archive-large {
    margin-bottom: var(--sp-32);
    padding-bottom: var(--sp-32);
    border-bottom: 1px solid var(--color-border);
}

.stb-archive-large .stb-archive-large-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--sp-16);
}

.stb-archive-large .stb-archive-large-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-archive-large:hover .stb-archive-large-thumb img {
    transform: scale(1.02);
}

.stb-archive-large .stb-archive-large-body {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.stb-archive-large .stb-archive-large-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    margin-bottom: var(--sp-8);
}

.stb-archive-large .stb-archive-large-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-heading);
    margin-bottom: var(--sp-8);
}

.stb-archive-large .stb-archive-large-title a {
    color: inherit;
}

.stb-archive-large .stb-archive-large-title a:hover {
    color: var(--color-accent);
}

.stb-archive-large .stb-archive-large-meta {
    font-size: 13px;
    color: var(--color-meta);
}

/* List items (compact horizontal) */
.stb-archive-list-item {
    display: flex;
    gap: var(--sp-24);
    padding: var(--sp-24) 0;
    border-bottom: 1px solid var(--color-border);
}

.stb-archive-list-item:last-child {
    border-bottom: none;
}

.stb-archive-list-thumb {
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.stb-archive-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.stb-archive-list-item:hover .stb-archive-list-thumb img {
    transform: scale(1.05);
}

.stb-archive-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-12) 0;
}

.stb-archive-list-cat {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    margin-bottom: var(--sp-8);
}

.stb-archive-list-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-heading);
    margin-bottom: var(--sp-8);
}

.stb-archive-list-title a {
    color: inherit;
}

.stb-archive-list-title a:hover {
    color: var(--color-accent);
}

.stb-archive-list-excerpt {
    font-size: 14px;
    color: var(--color-meta);
    line-height: 1.6;
    margin-bottom: var(--sp-8);
}

.stb-archive-list-meta {
    font-size: 13px;
    color: var(--color-meta);
}

/* --------------------------------------------------------------------------
 * 12. Responsive — Custom Elements
 * ----------------------------------------------------------------------- */

/* === Tablet (max-width: 961px) === */
@media (max-width: 961px) {
    /* Header */
    .stb-menu-toggle {
        display: flex;
    }

    .stb-nav-bar {
        display: none;
    }

    .stb-logo {
        position: static;
        transform: none;
        margin: 0 auto;
    }

    .stb-header-top .stb-container {
        justify-content: center;
    }

    .stb-menu-toggle {
        position: absolute;
        left: 15px;
    }

    .stb-search-toggle {
        position: absolute;
        right: 15px;
    }

    /* Hero */
    .stb-hero-overlay .stb-hero-title {
        font-size: 24px;
    }

    .stb-hero-posts {
        flex-wrap: wrap;
    }

    .stb-hero-post-item {
        flex: 0 0 calc(50% - 12px);
    }

    /* Category cards */
    .stb-cat-cards {
        grid-template-columns: 1fr;
        gap: var(--sp-24);
    }

    /* Latest section */
    .stb-latest-row-large {
        flex-direction: column;
    }

    .stb-latest-row-small {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dark section */
    .stb-dark-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Latest grid */
    .stb-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer — already centered, no changes needed */

    /* Archive mixed */
    .stb-archive-grid-row .stb-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .stb-archive-list-item {
        flex-direction: column;
    }

    .stb-archive-list-thumb {
        width: 100%;
    }

    /* Section title */
    .stb-section-title span {
        font-size: 22px;
    }
}

/* === Mobile landscape (max-width: 768px) === */
@media (max-width: 768px) {
    /* Hero */
    .stb-hero-main {
        aspect-ratio: 4 / 3;
    }

    .stb-hero-overlay .stb-hero-title {
        font-size: 20px;
    }

    .stb-hero-overlay {
        padding: var(--sp-32) var(--sp-16) var(--sp-16);
    }

    .stb-hero-posts {
        flex-direction: column;
        gap: var(--sp-16);
    }

    .stb-hero-post-item {
        flex: 0 0 100%;
    }

    /* Category cards */
    .stb-cat-cards {
        padding: var(--sp-32) 0;
    }

    .stb-cat-card-body h3 {
        font-size: 18px;
    }

    /* Latest row small */
    .stb-latest-row-small {
        grid-template-columns: 1fr;
        gap: var(--sp-16);
    }

    .stb-card-featured .stb-card-title {
        font-size: 18px;
    }

    /* Dark section */
    .stb-dark-section {
        padding: var(--sp-48) 0;
    }

    .stb-dark-grid {
        grid-template-columns: 1fr;
    }

    .stb-dark-item {
        aspect-ratio: 16 / 9;
    }

    /* Carousel */
    .stb-carousel-section .swiper-slide {
        width: 220px;
    }

    /* Latest grid */
    .stb-latest-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-16);
        padding: var(--sp-32) 0;
    }

    /* Footer */
    .stb-footer {
        padding: var(--sp-48) 0 0;
    }

    /* Footer copyright — already centered */

    .stb-footer-links ul {
        justify-content: center;
    }

    /* Archive mixed */
    .stb-archive-large .stb-archive-large-title {
        font-size: 20px;
    }

    .stb-archive-list-title {
        font-size: 17px;
    }

    /* Search overlay */
    .stb-search-overlay-inner input[type="search"] {
        font-size: 18px;
    }

    /* Section title */
    .stb-section-title span {
        font-size: 20px;
    }

    .stb-section-title {
        gap: var(--sp-16);
    }
}

/* === Mobile portrait (max-width: 480px) === */
@media (max-width: 480px) {
    /* Header */
    .stb-logo-text {
        font-size: 22px;
    }

    /* Hero */
    .stb-hero-overlay .stb-hero-title {
        font-size: 18px;
    }

    .stb-hero-post-thumb {
        width: 60px;
        height: 60px;
    }

    .stb-hero-post-title {
        font-size: 13px;
    }

    /* Category cards */
    .stb-cat-card-body {
        padding: var(--sp-16) var(--sp-4);
    }

    /* Latest section */
    .stb-latest-section {
        padding: var(--sp-32) 0;
    }

    .stb-card-featured .stb-card-title {
        font-size: 16px;
    }

    .stb-card-small .stb-card-title {
        font-size: 14px;
    }

    /* Dark section */
    .stb-dark-item .stb-dark-title {
        font-size: 15px;
    }

    .stb-dark-item .stb-dark-overlay {
        padding: var(--sp-16);
    }

    /* Carousel */
    .stb-carousel-section .swiper-slide {
        width: 200px;
    }

    .stb-carousel-item .stb-carousel-title {
        font-size: 14px;
    }

    /* Latest grid */
    .stb-latest-grid-thumb {
        width: 90px;
        height: 60px;
    }

    .stb-latest-grid-title {
        font-size: 13px;
    }

    /* Footer */
    .stb-footer-logo {
        font-size: 20px;
    }

    .stb-footer-desc {
        font-size: 13px;
    }

    .stb-footer-links ul li::after {
        margin: 0 var(--sp-8);
    }

    /* Archive mixed */
    .stb-archive-large .stb-archive-large-title {
        font-size: 18px;
    }

    .stb-archive-list-title {
        font-size: 16px;
    }

    .stb-archive-list-thumb {
        aspect-ratio: 16 / 9;
    }

    /* Search overlay */
    .stb-search-overlay-inner input[type="search"] {
        font-size: 16px;
    }

    .stb-search-overlay-close {
        top: -50px;
    }

    /* Section title */
    .stb-section-title span {
        font-size: 18px;
    }

    .stb-section-title {
        gap: var(--sp-12);
    }
}