/*
Theme Name: PIXBLUES Qi Child
Description: Preserves the Qi theme while arranging single posts as title, featured image, then post content.
Author: PIXBLUES
Version: 1.0.5
Template: qi
Text Domain: pixblues-qi-child
*/

article.pb-single-post .qodef-e-content,
article.pb-single-post .qodef-e-text,
article.pb-single-post .qodef-e-media,
article.pb-single-post .qodef-e-media-image {
	width: 100%;
	max-width: 100%;
}

article.pb-single-post .qodef-e-media {
	position: relative;
	left: 50%;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: -50vw;
}

article.pb-single-post .qodef-e-media-image,
article.pb-single-post .qodef-e-media-image > a,
article.pb-single-post .qodef-e-media-image img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto;
}

article.pb-single-post .qodef-e-media-image img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
}

@media (min-width: 768px) {
	article.pb-single-post .qodef-e-media-image img {
		height: clamp(420px, 60vh, 760px);
		object-fit: cover;
		object-position: center;
	}
}

article.pb-single-post .pb-single-post-heading {
	margin-top: -90px !important;
	padding-bottom: 10px;
}

article.pb-single-post .pb-single-post-title {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	article.pb-single-post .pb-single-post-heading {
		margin-top: 0 !important;
	}
}

/* ========================================================
   PIXBLUES HOMEPAGE DYNAMIC COMPONENTS CSS (REFINED)
   ======================================================== */

/* Shortcode widget container sizing */
.elementor-element-10d83ac .elementor-widget-shortcode,
.elementor-element-7b36ea66 .elementor-widget-shortcode,
.elementor-element-7a7a52ef .elementor-widget-shortcode,
.elementor-element-169d66d5 .elementor-widget-shortcode {
    width: 100% !important;
}

/* 1. FEATURED STORY COMPONENT */
.pb-dyn-story-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 68vh;
    margin: 0;
    align-items: stretch;
}
.pb-dyn-story-visual-col {
    width: 58%;
    min-width: 0;
    min-height: 68vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    box-sizing: border-box;
}
.pb-dyn-story-plate-tag {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    color: #B87333;
    letter-spacing: 0.18em;
    margin: 0;
}
.pb-dyn-story-plate-center {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    color: rgba(242, 239, 234, 0.55);
    text-align: center;
    font-style: italic;
    margin: auto 0;
}
.pb-dyn-story-plate-caption {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 0.6rem;
    color: #F2EFEA;
    letter-spacing: 0.12em;
    margin: 0;
}
.pb-dyn-story-text-col {
    width: 42%;
    min-width: 0;
    min-height: 68vh;
    background-color: #F4F0E8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 64px;
    box-sizing: border-box;
}
.pb-dyn-story-eyebrow {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #B87333;
    letter-spacing: 0.22em;
    margin: 0 0 16px 0;
}
.pb-dyn-story-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 2.85rem;
    color: #202020;
    line-height: 1.15;
    margin: 0 0 18px 0;
}
.pb-dyn-story-title a {
    color: inherit;
    text-decoration: none;
}
.pb-dyn-story-title a:hover {
    color: inherit;
}
.pb-dyn-story-excerpt {
    font-family: Manrope, sans-serif;
    font-size: 0.98rem;
    color: #55524E;
    line-height: 1.7;
    margin: 0 0 22px 0;
}
.pb-dyn-story-meta {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    color: #73706A;
    letter-spacing: 0.15em;
    margin: 0 0 24px 0;
}
.pb-dyn-story-link a {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    color: #B87333;
    letter-spacing: 0.22em;
    text-decoration: none;
}

@media (max-width: 767px) {
    .pb-dyn-story-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    .pb-dyn-story-visual-col {
        width: 100%;
        min-height: 380px;
        padding: 24px;
    }
    .pb-dyn-story-text-col {
        width: 100%;
        min-height: auto;
        padding: 48px 24px;
    }
}

/* 2. CURATED COLLECTION COMPONENT */
.pb-dyn-curated-wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.pb-dyn-curated-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 24px;
    margin-bottom: 48px;
}
.pb-dyn-curated-kicker {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #B87333;
    letter-spacing: 0.25em;
    margin: 0 0 16px 0;
}
.pb-dyn-curated-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 3.5rem;
    color: #F2EFEA;
    line-height: 1.1;
    margin: 0 0 16px 0;
}
.pb-dyn-curated-title a {
    color: inherit;
    text-decoration: none;
}
.pb-dyn-curated-title a:hover {
    color: inherit;
}
.pb-dyn-curated-desc {
    font-family: Manrope, sans-serif;
    font-size: 1.05rem;
    color: rgba(242, 239, 234, 0.65);
    line-height: 1.7;
    max-width: 640px;
    margin: 0;
}
.pb-dyn-curated-indicator {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #B87333;
    letter-spacing: 0.25em;
    margin: 0;
    text-align: right;
}
.pb-dyn-curated-grid-tier1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 270px;
    gap: 16px;
    width: 100%;
    margin-bottom: 48px;
}
.pb-dyn-curated-frame {
    min-height: 270px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
}
.pb-dyn-curated-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(242, 239, 234, 0.12);
    padding-top: 24px;
}
.pb-dyn-curated-foot-meta {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    color: rgba(242, 239, 234, 0.55);
    letter-spacing: 0.18em;
    margin: 0;
}
.pb-dyn-curated-link a {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: #B87333;
    letter-spacing: 0.22em;
    text-decoration: none;
}

@media (max-width: 767px) {
    .pb-dyn-curated-header,
    .pb-dyn-curated-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .pb-dyn-curated-title {
        font-size: 2.3rem;
    }
    .pb-dyn-curated-grid-tier1 {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(190px, auto);
        gap: 12px;
        margin-bottom: 32px;
    }
    .pb-dyn-curated-frame {
        min-height: 190px;
    }
}

/* 3. CHESSBOARD GRID (JOURNAL & TUTORIALS) */
.pb-dyn-feed {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0;
    padding: 0;
}
.pb-dyn-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: stretch;
    min-height: 15.3333vw;
}
.pb-dyn-card {
    width: 33.3333%;
    min-width: 0px;
    aspect-ratio: 2 / 1;
    min-height: 15.3333vw;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    background-color: #FAF8F5;
    display: flex;
    flex-direction: row;
    flex: 1 1 0px;
    align-items: stretch;
    box-sizing: border-box;
}
.pb-dyn-cell {
    min-width: 0;
    box-sizing: border-box;
}
.pb-cell-img {
    width: 50% !important;
    aspect-ratio: 1 / 1;
    min-height: 15.3333vw;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex: 50 1 0px;
}
.pb-feed-tutorials .pb-cell-img {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 14px;
    padding-right: 14px;
}
.pb-cell-txt {
    width: 50% !important;
    aspect-ratio: 1 / 1;
    min-height: 15.3333vw;
    padding: 22px 18px;
    background-color: #FAF8F5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 50 1 0px;
}
.pb-dyn-tag {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.6rem;
    color: #B87333;
    letter-spacing: 0.16em;
    margin: 0;
}
.pb-dyn-center {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    color: rgba(242, 239, 234, 0.5);
    text-align: center;
    font-style: italic;
    margin: auto 0;
    width: 100%;
}
.pb-dyn-cap {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 0.58rem;
    color: #F2EFEA;
    letter-spacing: 0.12em;
    margin: 0;
}
.pb-dyn-cat {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 0.62rem;
    color: #B87333;
    letter-spacing: 0.18em;
    margin: 0 0 8px 0;
}
.pb-dyn-card-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: #202020;
    line-height: 1.25;
    margin: 0 0 10px 0;
}
.pb-dyn-card-title a {
    color: inherit;
    text-decoration: none;
}
.pb-dyn-card-title a:hover {
    color: inherit;
}
.pb-dyn-meta {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 0.65rem;
    color: #73706A;
    letter-spacing: 0.12em;
    margin: 0;
}

/* Mobile Alternating Chessboard */
@media (max-width: 767px) {
    .pb-dyn-row {
        flex-direction: column;
        min-height: auto;
    }
    .pb-dyn-card {
        width: 100%;
        aspect-ratio: auto;
        min-height: 190px;
        flex: 0 1 auto;
    }
    .pb-feed-tutorials .pb-dyn-card {
        min-height: 180px;
    }
    .pb-dyn-row .pb-dyn-card:nth-child(even) {
        flex-direction: row-reverse;
    }
    .pb-dyn-row-text-first .pb-dyn-card:nth-child(odd) {
        flex-direction: row-reverse;
    }
    .pb-dyn-row-text-first .pb-dyn-card:nth-child(even) {
        flex-direction: row;
    }
    .pb-cell-img,
    .pb-cell-txt {
        width: 50% !important;
        aspect-ratio: auto;
        min-height: 190px;
    }
    .pb-feed-tutorials .pb-cell-img,
    .pb-feed-tutorials .pb-cell-txt {
        min-height: 180px;
    }
}