/* ==========================================================
   PETERS PRODUCT REVIEWS
   Twenty Twenty-Five Child Theme
   Main Stylesheet
   Updated: November 2026

   01. Fonts and Variables
   02. Global Styles
   03. Header and Navigation
   04. Homepage Hero
   05. Buttons
   06. Trust Strip
   07. Categories
   08. Featured Reviews
   09. Product Image Display
   10. Promotional Section
   11. Footer
   12. Category Archives
   13. Single Reviews
   14. Article Content
   15. General Pages
   16. Tablet Responsive
   17. Mobile Responsive
   ========================================================== */


/* ==========================================================
   01. FONTS AND VARIABLES
   ========================================================== */

@import url(
    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'
);

:root {
    --navy: #061126;
    --deep: #07152f;
    --panel: #0d2041;

    --cyan: #04d9f8;
    --purple: #a243fa;
    --yellow: #ffca20;

    --white: #ffffff;
    --muted: #b9cbe4;

    --container-width: 1280px;
    --card-radius: 12px;
}


/* ==========================================================
   02. GLOBAL STYLES
   ========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--navy);
    color: var(--white);

    font-family: Inter, system-ui, sans-serif;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--cyan);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: min(
        var(--container-width),
        calc(100% - 48px)
    );

    margin-inline: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

.skip-link {
    position: absolute;
    top: -80px;
    left: 10px;

    padding: 12px;
    background: white;
    color: black;

    z-index: 1000;
}

.skip-link:focus {
    top: 10px;
}


/* ==========================================================
   03. HEADER AND NAVIGATION
   ========================================================== */

.site-header {
    position: relative;
    z-index: 100;

    background: linear-gradient(
        110deg,
        #030b1a,
        #0a1834
    );

    border-bottom: 2px solid transparent;

    border-image: linear-gradient(
        90deg,
        #06e5ff,
        #357bff,
        #b647f7
    ) 1;

    box-shadow: 0 4px 20px #00cfff3b;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 88px;
    gap: 30px;
}

/* Logo */

.brand {
    display: flex;
    align-items: center;
    gap: 14px;

    flex-shrink: 0;
}

.brand-upload {
    display: block;

    max-width: 380px;
    max-height: 78px;

    width: auto;
    height: auto;

    object-fit: contain;
}

.brand-mark {
    font-size: 54px;
    font-weight: 900;
    font-style: italic;

    letter-spacing: -8px;
    line-height: 1;

    text-shadow:
        0 2px 0 #8192b4,
        0 5px 10px #007aff;
}

.brand-mark em {
    font-style: italic;
    color: #f3f6ff;
}

.brand-mark em:nth-child(2) {
    color: var(--cyan);
}

.brand-divider {
    width: 2px;
    height: 48px;

    background: linear-gradient(
        #03dfff,
        #ffffff,
        #03dfff
    );
}

.brand-name {
    max-width: 180px;

    font-size: 20px;
    font-weight: 900;
    font-style: italic;

    line-height: 1.05;
}

.brand-name strong {
    display: block;

    color: var(--cyan);
    font-size: 27px;
}

/* Navigation */

.main-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 25px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.nav-list a {
    font-size: 14px;
    font-weight: 700;
}

/* Search */

.search-form {
    display: flex;
    align-items: center;

    border: 1px solid #345074;
    border-radius: 50px;

    background: #172445;
    overflow: hidden;
}

.search-form input {
    width: 0;
    padding: 0;

    border: 0;
    outline: none;

    background: transparent;
    color: white;

    transition: width 0.2s;
}

.search-form:hover input,
.search-form:focus-within input {
    width: 140px;
    padding: 10px;
}

.search-form button {
    width: 43px;
    height: 43px;

    border: 0;

    background: transparent;
    color: white;

    font-size: 26px;
    cursor: pointer;
}

/* Mobile Menu */

.menu-toggle {
    display: none;

    padding: 8px 12px;

    background: transparent;
    color: white;

    border: 1px solid #45617d;
    border-radius: 8px;

    cursor: pointer;
}


/* ==========================================================
   04. HOMEPAGE HERO
   ========================================================== */

.hero {
    background: radial-gradient(
        ellipse at 72% 45%,
        #7137c9 0%,
        #183b86 29%,
        #071b3c 55%,
        #041127 100%
    );

    overflow: hidden;
    border-bottom: 1px solid #2758a0;
}

.hero-grid {
    display: grid;

    grid-template-columns: 1.05fr 1fr;
    align-items: center;

    min-height: 465px;
    gap: 25px;
}

.hero-copy {
    padding: 45px 0;
}

.eyebrow {
    color: var(--cyan);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero h1 {
    margin: 15px 0;

    font-size: clamp(34px, 4vw, 60px);
    font-weight: 900;
    font-style: italic;

    line-height: 1.06;
    letter-spacing: -2px;
}

.hero h1 span,
.section-title span,
.page-hero h1 span {
    color: var(--cyan);
}

.hero p {
    max-width: 520px;

    color: #e2ebfc;
    font-size: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
    margin-top: 25px;
}

/* Hero Artwork */

.hero-art {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 345px;
}

.hero-screen {
    position: relative;

    width: 90%;
    height: 275px;

    border: 8px solid #0b1d38;
    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #e65d98 0%,
        #ffad43 30%,
        #263ca3 55%,
        #0b285b 75%,
        #081c3c 100%
    );

    box-shadow:
        0 0 0 2px #00bff9,
        0 20px 70px #00baff7d;

    overflow: hidden;
}

.sun {
    position: absolute;

    top: 28%;
    left: 45%;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: #ffcb67;
    filter: blur(18px);

    opacity: 0.65;
}

.mountains {
    position: absolute;
    inset: 40% -10% 0;

    background: linear-gradient(
        130deg,
        #080f37 25%,
        transparent 25%
    ) left bottom / 40% 100% repeat-x;

    clip-path: polygon(
        0 100%,
        0 70%,
        17% 20%,
        30% 78%,
        45% 12%,
        58% 80%,
        74% 30%,
        100% 80%,
        100% 100%
    );
}

.device-row {
    position: absolute;
    bottom: 0;

    display: flex;
    align-items: flex-end;
    gap: 20px;

    font-size: 70px;
    text-shadow: 0 5px 15px #000000;
}


/* ==========================================================
   05. BUTTONS
   ========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
    padding: 13px 23px;

    border-radius: 28px;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
    color: inherit;
}

.btn-yellow {
    background: linear-gradient(
        #ffe15c,
        #ffbd00
    );

    color: #071126;

    box-shadow: 0 4px 0 #b67b00;
}

.btn-yellow:hover {
    color: #071126;

    box-shadow: 0 6px 18px #ffce3866;
}

.btn-outline {
    background: #0b1630a6;
    color: white;

    border: 1px solid #c6e4ff;
}


/* ==========================================================
   06. TRUST STRIP
   ========================================================== */

.trust-strip {
    background: linear-gradient(
        90deg,
        #091d3d,
        #102c5a,
        #081b39
    );

    border-bottom: 1px solid #2e6ab1;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
    padding: 18px 0;
}

.trust-grid > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-grid b {
    color: var(--cyan);
    font-size: 35px;
}

.trust-grid > div:nth-child(1) b {
    color: #e657f9;
}

.trust-grid > div:nth-child(4) b {
    color: #ffd32e;
}

.trust-grid strong {
    display: block;
    font-size: 14px;
}

.trust-grid small {
    color: #b6c9e5;
    font-size: 12px;
}


/* ==========================================================
   07. PRODUCT CATEGORIES
   ========================================================== */

.section {
    padding: 50px 0;
}

.section-title {
    margin: 0 0 30px;

    font-size: clamp(27px, 3vw, 40px);
    line-height: 1.2;

    text-align: center;
    letter-spacing: -1px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 12px;
}

.category-tile {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: space-between;

    min-height: 170px;
    padding: 18px 10px;

    border: 1px solid #00c7ff;
    border-radius: 14px;

    background: radial-gradient(
        circle at 50% 30%,
        #663ab0,
        #0d2143 70%
    );

    text-align: center;

    box-shadow: inset 0 0 20px #00aaff18;

    transition: transform 0.2s;
}

.category-tile:nth-child(even) {
    border-color: #b64eff;

    background: radial-gradient(
        circle at 50% 25%,
        #824177,
        #10244c 72%
    );
}

.category-tile:hover {
    transform: translateY(-5px);
    color: white;
}

.category-icon {
    font-size: 65px;
    filter: drop-shadow(0 5px 12px #0008);
}

.category-tile strong {
    font-size: 13px;
    line-height: 1.2;
}


/* ==========================================================
   08. FEATURED PRODUCT REVIEWS
   ========================================================== */

.featured {
    background: linear-gradient(
        180deg,
        #0c1f41,
        #07162f
    );
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;
}

.section-head .section-title {
    text-align: left;
}

.section-head > a {
    color: var(--cyan);

    font-size: 14px;
    font-weight: 700;
}

.reviews-grid {
    display: grid;

    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );

    gap: 18px;
}

/* Review Card */

.review-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #f5f8ff;
    color: #101829;

    border-radius: var(--card-radius);

    overflow: hidden;
    box-shadow: 0 6px 22px #0006;
}



/* ==========================================================
   09. PRODUCT IMAGE DISPLAY
   PPR - SQUARE PRODUCT IMAGE CONTAINERS
   ========================================================== */

/* Square image container */
.review-card .review-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #101b38;
    overflow: hidden;

    flex-shrink: 0;
}

/* Image fills square without cropping */
.review-card .review-image img,
.review-card .review-image img.ppr-card-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 100% !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
    transition: none !important;
}

/* Disable image zoom */
.review-card .review-image:hover img {
    transform: none !important;
}

/* Placeholder for missing images */
.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    background: #101b38;
    color: #8ba9d9;

    font-weight: 900;
    letter-spacing: 1px;
}



/* ==========================================================
   10. PROMOTIONAL SECTION
   ========================================================== */

.promo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    padding: 30px;

    border: 1px solid #2b9cff;
    border-radius: 15px;

    background: linear-gradient(
        100deg,
        #102d61,
        #07142b
    );

    box-shadow: 0 0 28px #0789ff22;
}

.promo h2 {
    margin: 0;
    font-size: 27px;
}

.promo p {
    margin: 6px 0 0;
    color: var(--muted);
}


/* ==========================================================
   11. FOOTER
   ========================================================== */

.site-footer {
    padding: 45px 0 20px;

    background: #030b1b;
    border-top: 1px solid #2462a6;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.1fr
        0.5fr
        1.4fr;

    gap: 45px;
}

.site-footer h2 {
    margin: 0;
    font-size: 23px;
}

.site-footer h2 span {
    color: var(--cyan);
}

.site-footer h3 {
    margin-top: 0;
}

.site-footer p,
.site-footer a {
    color: #aabbd3;
    font-size: 13px;
}

.site-footer a {
    display: block;
    margin: 8px 0;
}

.copyright {
    margin-top: 30px;
    padding-top: 15px;

    border-top: 1px solid #21304d;

    color: #91a2bb;
    font-size: 12px;
}


/* ==========================================================
   12. CATEGORY AND ARCHIVE PAGES
   ========================================================== */

.page-hero {
    padding: 70px 0;

    background: radial-gradient(
        circle at 80% 30%,
        #403ca0,
        #091b39 65%
    );
}

.page-hero h1 {
    margin: 10px 0;

    font-size: clamp(34px, 5vw, 60px);
}

.page-hero p {
    color: #c4d6ed;
}

.pagination {
    margin-top: 30px;
}

.pagination .page-numbers {
    display: inline-block;

    padding: 8px 12px;

    background: #183963;
    border-radius: 6px;
}


/* ==========================================================
   13. SINGLE PRODUCT REVIEW PAGES
   ========================================================== */

.single-review {
    padding: 35px 0 75px;
}

.review-breadcrumb {
    margin-bottom: 20px;

    color: #8eaed3;
    font-size: 13px;
}

.single-head {
    max-width: 950px;
}

.single-head h1 {
    margin: 10px 0;

    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.12;
}

.single-head p {
    color: #c9d9ef;
    font-size: 19px;
}

.review-meta {
    color: #91aacb;
    font-size: 12px;
}

/* Affiliate Disclosure */

.disclosure {
    margin: 30px 0;
    padding: 14px 18px;

    background: #152a47;

    border-left: 4px solid #02d6f8;

    color: #c7d6eb;
    font-size: 13px;
}

/* Review Layout */

.review-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(260px, 1fr);

    gap: 35px;
}

/* Main Product Image */

.single-photo {
    background: #e9eef8;

    border-radius: 16px;
    overflow: hidden;

    text-align: center;
}

.single-photo img {
    display: block;

    max-width: 100%;
    height: auto;

    margin-inline: auto;

    object-fit: contain;
}


/* ==========================================================
   14. ARTICLE CONTENT AND SIDEBAR
   ========================================================== */

.article-content {
    color: #e4ebf6;

    font-size: 17px;
    line-height: 1.8;
}

.article-content h2,
.article-content h3 {
    color: white;
}

.article-content a {
    color: #5feaff;
    text-decoration: underline;
}

.article-content img {
    max-width: 100%;
    height: auto;

    border-radius: 10px;
}

/* Review Verdict */

.verdict,
.sidebar-box,
.pros-cons > div {
    padding: 22px;
    margin-top: 25px;

    background: #102544;

    border: 1px solid #2d5781;
    border-radius: 14px;
}

.verdict h2,
.sidebar-box h2,
.pros-cons h2 {
    margin-top: 0;
}

/* Affiliate Sidebar */

.sidebar-box {
    position: sticky;
    top: 20px;

    margin-top: 0;
}

.sidebar-box p {
    padding-bottom: 12px;

    border-bottom: 1px solid #274567;

    font-size: 14px;
}

.sidebar-box strong {
    display: block;
    color: #8daacc;
}

.sidebar-box .btn {
    width: 100%;
    margin-top: 12px;
}

.sidebar-box small {
    display: block;
    margin-top: 12px;

    color: #9bb2ce;
}

/* Pros and Cons */

.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 15px;
}

.pros-cons li {
    margin-bottom: 8px;
}


/* ==========================================================
   15. GENERAL WORDPRESS PAGES
   ========================================================== */

.page-content {
    min-height: 45vh;
    padding: 45px 0;
}

.page-content a {
    color: var(--cyan);
}


/* ==========================================================
   16. TABLET RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .nav-list {
        gap: 13px;
    }

    .brand-mark {
        font-size: 43px;
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-name strong {
        font-size: 21px;
    }

}


@media (max-width: 800px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--container-width)
        );
    }

    /* Header */

    .header-inner {
        min-height: 75px;
    }

    .menu-toggle {
        display: block;
    }

    /* Mobile Navigation */

    .main-nav {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        padding: 20px;

        background: #06142d;

        border-bottom: 1px solid #23cafa;
    }

    .main-nav.is-open {
        display: block;
    }

    .nav-list {
        display: flex;
        flex-direction: column;

        align-items: flex-start;
        gap: 18px;
    }

    .search-form {
        margin-top: 20px;
        max-width: 320px;
    }

    .search-form input {
        width: 100%;
        padding: 10px;
    }

    /* Hero */

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        padding: 35px 0 0;
    }

    .hero-art {
        min-height: 250px;
    }

    .hero-screen {
        height: 210px;
    }

    /* Trust Strip */

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

    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid > div:last-child {
        grid-column: 1 / -1;
    }

    /* Single Reviews */

    .review-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-box {
        position: static;
    }

    /* Promotional Section */

    .promo {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* ==========================================================
   17. MOBILE RESPONSIVE
   ========================================================== */

@media (max-width: 520px) {

    /* Logo */

    .brand {
        gap: 9px;
    }

    .brand-mark {
        font-size: 37px;
    }

    .brand-name {
        max-width: 125px;
        font-size: 13px;
    }

    .brand-name strong {
        font-size: 18px;
    }

    .brand-divider {
        height: 35px;
    }

    .brand-upload {
        max-width: 230px;
        max-height: 60px;
    }

    /* Hero */

    .hero h1 {
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 16px;
    }

    .hero-art {
        min-height: 220px;
    }

    .hero-screen {
        height: 170px;
    }

    .device-row {
        font-size: 50px;
    }

    /* Categories */

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

    /* Product Reviews */

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* Trust Strip */

    .trust-grid {
        gap: 12px;
    }

    .trust-grid strong {
        font-size: 12px;
    }

    .trust-grid b {
        font-size: 25px;
    }

    .trust-grid small {
        font-size: 10px;
    }

    /* Section Headings */

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Promotional Section */

    .promo {
        padding: 22px;
    }

    /* Pros and Cons */

    .pros-cons {
        grid-template-columns: 1fr;
    }

    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid > div:last-child {
        grid-column: auto;
    }

}

/* ==========================================================
   END OF PETERS PRODUCT REVIEWS MAIN.CSS
   ========================================================== */

/* =====================================================
   PETERS PRODUCT REVIEWS
   PREMIUM PRODUCT REVIEW CARD STYLING
   Category Archives + Featured Reviews
   ===================================================== */

/* Main review card */
.review-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #f5f7fc;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
}

/* Hover effect */
.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

/* Keep existing image display settings */
.review-card .review-image {
    display: block;
    overflow: hidden;
}

/* Product card content */
.review-card .review-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
    padding: 22px 22px 24px;
    background: #f5f7fc;
}

/* Category label */
.review-card .review-body .review-category,
.review-card .review-body .review-cat,
.review-card .review-body .category-label,
.review-card .review-body .eyebrow {
    display: block;
    margin: 0 0 12px;
    color: #087eae;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Product review title */
.review-card .review-body h2,
.review-card .review-body h3,
.review-card .review-body .review-title {
    margin: 0 0 12px;
    padding: 0;
    color: #14243e;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.45px;
}

/* Product title links */
.review-card .review-body h2 a,
.review-card .review-body h3 a,
.review-card .review-body .review-title a {
    color: inherit;
    text-decoration: none;
}

.review-card .review-body h2 a:hover,
.review-card .review-body h3 a:hover,
.review-card .review-body .review-title a:hover {
    color: #087eae;
}

/* Review excerpt - smaller and more elegant */
.review-card .review-body p,
.review-card .review-body .review-excerpt,
.review-card .review-body .excerpt {
    margin: 0 0 20px;
    color: #647084;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}

/* Limit excerpt to 3 lines */
.review-card .review-body .review-excerpt,
.review-card .review-body .excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Read review button */
.review-card .review-body .btn,
.review-card .review-body .button,
.review-card .review-body .read-more,
.review-card .review-body .review-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding: 13px 23px;
    border: 0;
    border-radius: 10px;
    background: #ffcb20;
    color: #101828;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease,
                transform 0.2s ease;
}

.review-card .review-body .btn:hover,
.review-card .review-body .button:hover,
.review-card .review-body .read-more:hover,
.review-card .review-body .review-button:hover {
    background: #f3b900;
    transform: translateY(-2px);
}

/* Consistent card widths */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 280px), 1fr)
    );
    gap: 28px;
    align-items: stretch;
}

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

    .review-card .review-body {
        padding: 18px;
    }

    .review-card .review-body h2,
    .review-card .review-body h3,
    .review-card .review-body .review-title {
        font-size: 19px;
    }

    .review-card .review-body p {
        font-size: 13px;
        line-height: 1.6;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* =========================================
   PPR HOMEPAGE HERO BANNER
   ========================================= */

.home .hero {
    background-color: #061633;
    background-image: url("https://petersproductreviews.com/wp-content/uploads/2026/11/peters-product-reviews-hero-banner-01.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    min-height: 480px;
    position: relative;
    display: flex;
    align-items: center;
}

/* Keep HTML text above the background */
.home .hero .container,
.home .hero .hero-content,
.home .hero .hero-copy {
    position: relative;
    z-index: 2;
}

/* Prevent text from reaching the people */
.home .hero .hero-copy {
    max-width: 570px;
}

/* Hide the old illustration if present */
.home .hero .hero-visual {
    display: none;
}

/* Tablet */
@media (max-width: 1024px) {
    .home .hero {
        min-height: 440px;
        background-position: 60% center;
    }

    .home .hero .hero-copy {
        max-width: 50%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .home .hero {
        min-height: 640px;
        align-items: flex-start;
        background-size: auto 55%;
        background-position: right bottom;
        background-color: #061633;
    }

    .home .hero .hero-copy {
        max-width: 100%;
    }
}
/* PPR HERO BANNER FIX */
.home .hero {
    background-color: #061633 !important;
    background-image: url("https://petersproductreviews.com/wp-content/uploads/2026/11/peters-product-reviews-hero-banner-01.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    min-height: 440px;
    position: relative;
}
.home .hero .hero-visual,
.home .hero .hero-art,
.home .hero .hero-media {
    display: none !important;
}
.home .hero .container,
.home .hero .hero-copy {
    position: relative;
    z-index: 2;
}
@media (max-width: 767px) {
    .home .hero {
        background-size: auto 55% !important;
        background-position: right bottom !important;
        min-height: 650px;
    }
    .home .hero .hero-copy {
        max-width: 100%;
    }
}