/* =============================================================
   Restroom Trailers Module Styles
   File: assets/css/restroom-trailers.css
   Compatible with: WordPress 6+, PHP 8+
   ============================================================= */

/* ---------------------------------------------------------------
   CSS Custom Properties
--------------------------------------------------------------- */
:root {
    --rt-primary:      #4b4f93;
    --rt-primary-dark: #383d84;
    --rt-hero-bg:      #4d5696;
    --rt-teal:         #3cbfee;
    --rt-text:         #333333;
    --rt-text-light:   #555555;
    --rt-border:       #e0e0e0;
    --rt-bg-light:     #f8f9fa;
    --rt-white:        #ffffff;
    --rt-shadow:       0 2px 12px rgba(0,0,0,.08);
    --rt-shadow-hover: 0 20px 40px rgba(0,0,0,.15);
    --rt-radius:       4px;
    --rt-transition:   .4s ease;
    --rt-max-width:    1440px; /* 关键修改1：从 1200px 改为 1440px，让网格变得更宽 */
    --rt-gutter:       30px;
}

/* ---------------------------------------------------------------
   HERO BANNER
--------------------------------------------------------------- */
.rt-hero {
    position: relative;
    background-color: var(--rt-hero-bg);
    /* 将原来的 420px 调小，建议改为 260px 或 280px */
    min-height: 260px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.rt-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--rt-max-width);
    margin: 0 auto;
    /* 将上下的 padding 从 60px 调小，比如改为 40px，让内容更紧凑 */
    padding: 40px var(--rt-gutter);
}

.rt-hero__text h1 {
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

.rt-hero__line1 {
    display: block;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--rt-white);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rt-hero__line2 {
    display: block;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 400;
    color: var(--rt-white);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Watermark logo */
.rt-hero__watermark {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    background-image: url('../images/badge-royal-flush.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .08;
    z-index: 1;
    pointer-events: none;
}

/* ---------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------- */
.rt-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--rt-radius);
    transition: background-color var(--rt-transition), transform .2s ease;
    cursor: pointer;
    border: none;
    letter-spacing: .02em;
}

.rt-btn--primary {
    background-color: var(--rt-teal);
    color: var(--rt-white);
}

.rt-btn--primary:hover {
    background-color: #2aade0;
    color: var(--rt-white);
    transform: translateY(-2px);
}

.rt-btn--teal {
    background-color: var(--rt-teal);
    color: var(--rt-white);
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rt-btn--teal:hover {
    background-color: #2aade0;
    color: var(--rt-white);
}

/* ---------------------------------------------------------------
   ABOUT SECTION (Listing Page)
--------------------------------------------------------------- */
.rt-about {
    padding: 70px 0;
    background: var(--rt-white);
}

.rt-about__inner {
    max-width: var(--rt-max-width);
    margin: 0 auto;
    padding: 0 var(--rt-gutter);
    display: flex;
    align-items: center;
    gap: 60px;
}

.rt-about__content {
    flex: 0 0 50%;
    max-width: 50%;
}

.rt-about__label {
    font-size: .95rem;
    color: var(--rt-teal);
    font-weight: 500;
    margin: 0 0 4px;
}

.rt-about__heading {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--rt-primary);
    margin: 0 0 18px;
    line-height: 1.2;
}

.rt-about__body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--rt-text-light);
    margin-bottom: 28px;
}

.rt-about__body a {
    color: var(--rt-teal);
    text-decoration: none;
}

.rt-about__body a:hover {
    text-decoration: underline;
}

.rt-about__image {
    flex: 0 0 50%;
    max-width: 50%;
}

.rt-about__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--rt-radius);
    box-shadow: var(--rt-shadow);
}

/* ---------------------------------------------------------------
   MID-PAGE TITLE BANNER (新增红框标题区)
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
   MID-PAGE TITLE BANNER (产品网格内的标题区)
--------------------------------------------------------------- */
.rt-mid-title {
    text-align: center;
    margin-bottom: 50px; /* 控制标题和下方产品卡片的距离 */
}

.rt-mid-title h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}

.rt-mid-title .text-teal {
    color: var(--rt-teal);
    font-weight: 400;
}

.rt-mid-title .text-primary {
    color: var(--rt-primary-dark);
    font-weight: 800;
}

.rt-mid-title p {
    font-size: 1.05rem;
    color: var(--rt-primary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .rt-mid-title p br {
        display: none;
    }
    .rt-mid-title {
        margin-bottom: 30px; /* 手机端稍微缩小间距 */
    }
}

/* ---------------------------------------------------------------
   PRODUCTS GRID SECTION
--------------------------------------------------------------- */
.rt-grid-section {
    padding: 10px 0 80px; /* 关键修改2：把 padding-top 改为 10px，缩短与上方标题的距离 */
    background: var(--rt-white); /* 关键修改3：将 --rt-bg-light 改为纯白 --rt-white */
}

.rt-grid-section__inner {
    max-width: var(--rt-max-width);
    margin: 0 auto;
    padding: 0 var(--rt-gutter);
}

/* ---- Grid ---- */
.rt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
}

/* ---------------------------------------------------------------
   PRODUCT CARD
--------------------------------------------------------------- */
.rt-card {
    position: relative;
    background: var(--rt-white);
    border-radius: var(--rt-radius);
    overflow: visible;
    box-shadow: var(--rt-shadow);
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
    display: flex;
    flex-direction: column;
}

.rt-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--rt-shadow-hover);
}

/* ---- Image Wrap with Hover Switch ---- */
.rt-card__image-link {
    display: block;
    overflow: hidden;
    position: relative;
}

/* ---- Image Wrap with Hover Switch ---- */
.rt-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10; /* 关键修改4：将 1 / 1 改为宽比例 16 / 10，完美复刻图二图片的横向视觉 */
    overflow: hidden;
}

.rt-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--rt-transition);
    display: block;
}

.rt-card__img--default {
    opacity: 1;
    z-index: 1;
}

.rt-card__img--hover {
    opacity: 0;
    z-index: 2;
}

.rt-card:hover .rt-card__img--default {
    opacity: 0;
}

.rt-card:hover .rt-card__img--hover {
    opacity: 1;
}

/* ---- Title Bar ---- */
.rt-card__title-bar {
    display: block;
    background-color: var(--rt-primary);
    color: var(--rt-white);
    text-decoration: none;
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: background-color .25s ease;
    line-height: 1.3;
    position: relative;
    z-index: 3;
}

.rt-card:hover .rt-card__title-bar {
    background-color: var(--rt-primary-dark);
}

/* ---- Description ---- */
.rt-card__desc-link {
    text-decoration: none; /* 去除超链接的自带下划线 */
    display: flex;
    flex: 1;
    cursor: pointer; /* 强制显示为点击的手指 */
}

.rt-card__desc {
    padding: 25px 25px;
    min-height: auto;
    flex: 1;
    width: 100%;
}

.rt-card__desc p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--rt-text-light);
    margin: 0;
    text-align: center;
    cursor: pointer; /* 确保鼠标放在文字上时也是手指，而不是编辑光标 */
}

/* ---------------------------------------------------------------
   RIBBON (New Arrival)
--------------------------------------------------------------- */
.rt-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

.rt-ribbon span {
    display: block;
    position: absolute;
    top: 20px;
    left: -28px;
    width: 120px;
    background-color: var(--rt-primary);
    color: var(--rt-white);
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 0;
    transform: rotate(-45deg);
    transform-origin: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ---------------------------------------------------------------
   DETAIL PAGE — BREADCRUMB
--------------------------------------------------------------- */
.rt-breadcrumb {
    font-size: .88rem;
    color: var(--rt-text-light);
    margin-bottom: 32px;
    padding-top: 8px;
}

.rt-breadcrumb a {
    color: var(--rt-teal);
    text-decoration: none;
}

.rt-breadcrumb a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   DETAIL PAGE — LAYOUT
--------------------------------------------------------------- */
.rt-detail {
    padding: 50px 0 80px;
    background: var(--rt-white);
}

.rt-detail__inner {
    max-width: var(--rt-max-width);
    margin: 0 auto;
    padding: 0 var(--rt-gutter);
}

.rt-detail__layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.rt-detail__main {
    flex: 1;
    min-width: 0;
}

.rt-detail__sidebar {
    flex: 0 0 180px;
    width: 180px;
}

/* ---------------------------------------------------------------
   DETAIL SECTIONS
--------------------------------------------------------------- */
.rt-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rt-border);
}

.rt-section:last-child {
    border-bottom: none;
}

.rt-section__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rt-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rt-border);
}

.rt-section__body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--rt-text-light);
    margin: 0 0 20px;
}

.rt-section__body a {
    color: var(--rt-teal);
    text-decoration: none;
}

/* ---------------------------------------------------------------
   FEATURES / OPTIONS — Two-column checklist
--------------------------------------------------------------- */
.rt-two-col-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
}

.rt-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rt-checklist li {
    font-size: .95rem;
    color: var(--rt-text-light);
    padding: 6px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.5;
}

.rt-check {
    color: var(--rt-teal);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   SPECIFICATIONS
--------------------------------------------------------------- */
.rt-specs-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
}

.rt-specs__left p,
.rt-specs__right p {
    font-size: .95rem;
    color: var(--rt-text-light);
    margin: 0 0 8px;
    line-height: 1.5;
}

.rt-specs__right p strong {
    color: var(--rt-primary);
}

/* ---------------------------------------------------------------
   ACCOMMODATES
--------------------------------------------------------------- */
.rt-accommodates {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.rt-accomm-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 220px;
}

.rt-accomm-icon {
    flex-shrink: 0;
    line-height: 1;
}

.rt-accomm-item p {
    font-size: .95rem;
    color: var(--rt-text-light);
    margin: 0;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   SITE REQUIREMENTS
--------------------------------------------------------------- */
.rt-requirements {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rt-req-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rt-req-icon {
    flex-shrink: 0;
    line-height: 1;
}

.rt-req-item p {
    font-size: .95rem;
    color: var(--rt-text-light);
    margin: 0;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   IMAGE GALLERY
--------------------------------------------------------------- */
.rt-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    cursor: pointer;
}

.rt-gallery__thumb {
    overflow: hidden;
    border-radius: 2px;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}

.rt-gallery__thumb:hover,
.rt-gallery__thumb--active {
    border-color: var(--rt-teal);
}

.rt-gallery__thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.rt-gallery__thumb:hover img {
    transform: scale(1.05);
}

/* ---------------------------------------------------------------
   LIGHTBOX
--------------------------------------------------------------- */
.rt-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.rt-lightbox.is-open {
    display: flex;
}

.rt-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--rt-radius);
    box-shadow: 0 0 40px rgba(0,0,0,.6);
}

.rt-lightbox__close {
    position: absolute;
    top: 20px;
    right: 28px;
    background: none;
    border: none;
    color: var(--rt-white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    transition: opacity .2s ease;
    padding: 0;
}

.rt-lightbox__close:hover {
    opacity: 1;
}

/* ---------------------------------------------------------------
   SIDEBAR IMAGES
--------------------------------------------------------------- */
.rt-sidebar-img {
    margin-bottom: 24px;
    text-align: center;
}

.rt-sidebar-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--rt-radius);
    box-shadow: var(--rt-shadow);
    margin-bottom: 6px;
}

.rt-sidebar-img__caption {
    font-size: .8rem;
    color: var(--rt-teal);
    font-style: italic;
    margin: 0;
}

/* ---------------------------------------------------------------
   CTA BLOCK
--------------------------------------------------------------- */
.rt-cta {
    padding: 30px;
    background: var(--rt-bg-light);
    border-radius: var(--rt-radius);
    text-align: center;
    border-bottom: none !important;
}

.rt-cta p {
    font-size: 1.1rem;
    color: var(--rt-text);
    margin: 0 0 18px;
}

/* ---------------------------------------------------------------
   RESPONSIVE — 1200px
--------------------------------------------------------------- */
@media (max-width: 1200px) {
    .rt-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }
}

/* ---------------------------------------------------------------
   RESPONSIVE — 992px
--------------------------------------------------------------- */
@media (max-width: 992px) {
    .rt-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rt-about__inner {
        flex-direction: column;
        gap: 36px;
    }

    .rt-about__content,
    .rt-about__image {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .rt-detail__layout {
        flex-direction: column;
    }

    .rt-detail__sidebar {
        width: 100%;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .rt-sidebar-img {
        flex: 0 0 calc(33.333% - 12px);
        margin-bottom: 0;
    }

    .rt-hero__watermark {
        width: 200px;
        height: 200px;
        right: 20px;
    }
}

/* ---------------------------------------------------------------
   RESPONSIVE — 768px
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .rt-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .rt-hero {
        /* 将原来的 300px 调小，建议改为 180px 或 200px */
        min-height: 180px;
    }

    .rt-two-col-list {
        grid-template-columns: 1fr;
    }

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

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

    .rt-accommodates {
        flex-direction: column;
        gap: 20px;
    }

    .rt-sidebar-img {
        flex: 0 0 calc(50% - 8px);
    }
}

/* ---------------------------------------------------------------
   RESPONSIVE — 576px
--------------------------------------------------------------- */
@media (max-width: 576px) {
    .rt-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .rt-card__image-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3; /* 关键修改：改为 3/2 比例，让图片纵向更高、整体更大，完美对齐图二效果 */
        overflow: hidden;
    }

    .rt-hero__watermark {
        display: none;
    }

    .rt-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .rt-sidebar-img {
        flex: 0 0 100%;
    }

    .rt-btn {
        width: 100%;
        text-align: center;
    }
}