/**
 * Styles for the "Chambers for Sale" catalogue (templates/chambers-catalogue.php).
 *
 * EVERY rule is scoped under .chamber-catalogue so nothing leaks onto the site
 * header/footer or collides with Bootstrap / style.css (which also define
 * .btn, .btn-primary, .card, .hero, .grid, .container).
 *
 * The original standalone page's global rules were intentionally dropped:
 *   - the `* { margin:0; padding:0 }` reset (would wipe header/footer spacing)
 *   - `body { background:#f4f7fa }` (would recolour the whole site)
 * Fonts (Exo / Roboto) are already loaded by includes/header.php.
 */

.chamber-catalogue { color: #1e2a3a; background: #f4f7fa; }
.chamber-catalogue h1,
.chamber-catalogue h2,
.chamber-catalogue h3 { font-family: 'Exo', sans-serif; }
.chamber-catalogue * { box-sizing: border-box; }

/* ---------- Hero ---------- */
.chamber-catalogue .cc-hero {
    position: relative; height: 70vh; min-height: 440px; max-height: 720px;
    overflow: hidden; background: #1e2a3a;
    display: flex; align-items: flex-end;
}
.chamber-catalogue .cc-hero-bg {
    position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
}
.chamber-catalogue .cc-hero-bg.active { opacity: 1; }
.chamber-catalogue .cc-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.chamber-catalogue .cc-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(20, 30, 44, .85) 0%, rgba(20, 30, 44, .35) 45%, rgba(20, 30, 44, .08) 75%);
}
.chamber-catalogue .cc-hero-caption {
    position: relative; z-index: 2; width: 100%;
    max-width: 1200px; margin: 0 auto; padding: 0 72px 84px; color: #fff;
}
.chamber-catalogue .cc-hero-caption .eyebrow {
    display: inline-block; background: rgba(39, 170, 225, .18); border: 1px solid rgba(39, 170, 225, .55);
    color: #7fd0f3; font-size: 12.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; backdrop-filter: blur(4px);
}
.chamber-catalogue .cc-hero-caption h1 {
    color: #fff;   /* explicit: style.css sets a dark heading color that would win over inherited white */
    font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; letter-spacing: .5px;
    line-height: 1.1; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); max-width: 640px; margin: 0;
}
.chamber-catalogue .cc-hero-caption > p {
    margin-top: 12px; max-width: 560px; color: #dbe9f4; font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.55; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.chamber-catalogue .cc-hero-ctas { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons — scoped so they override Bootstrap's .btn / .btn-primary */
.chamber-catalogue .btn {
    display: inline-block; font-family: 'Exo', sans-serif; font-weight: 600; font-size: 15px;
    padding: 13px 28px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 0;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.chamber-catalogue .btn:hover { transform: translateY(-2px); }
.chamber-catalogue .btn-primary { background: #27AAE1; color: #fff; box-shadow: 0 4px 16px rgba(39, 170, 225, .4); }
.chamber-catalogue .btn-primary:hover { background: #1a94c8; }
.chamber-catalogue .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(4px); }
.chamber-catalogue .btn-ghost:hover { background: rgba(255, 255, 255, .22); }

.chamber-catalogue .cc-hero-dots {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px;
    display: flex; justify-content: center; gap: 9px;
}
.chamber-catalogue .cc-hero-dot {
    width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
    background: rgba(255, 255, 255, .45); cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.chamber-catalogue .cc-hero-dot.active { width: 26px; background: #27AAE1; }

/* ---------- Category strip ---------- */
.chamber-catalogue .cats { max-width: 1200px; margin: -52px auto 0; padding: 0 20px; position: relative; z-index: 4; }
.chamber-catalogue .cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.chamber-catalogue .cat-tile {
    display: flex; align-items: center; gap: 16px; text-decoration: none;
    background: #fff; border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 6px 24px rgba(30, 42, 58, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.chamber-catalogue .cat-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(30, 42, 58, .18); }
.chamber-catalogue .cat-tile img {
    width: 74px; height: 74px; object-fit: contain; flex-shrink: 0;
    background: #f4f7fa; border-radius: 10px; padding: 6px;
}
.chamber-catalogue .cat-tile h3 { font-size: 16.5px; font-weight: 700; color: #1e2a3a; }
.chamber-catalogue .cat-tile p { margin-top: 3px; font-size: 12.5px; color: #5a6577; line-height: 1.45; }
.chamber-catalogue .cat-tile .go { margin-left: auto; color: #27AAE1; font-size: 20px; flex-shrink: 0; }

/* ---------- Catalogue sections ---------- */
.chamber-catalogue .cat-section { max-width: 1200px; margin: 64px auto 0; padding: 0 20px; scroll-margin-top: 24px; }
.chamber-catalogue .cat-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.chamber-catalogue .cat-head h2 { font-size: 28px; font-weight: 700; color: #1e2a3a; }
.chamber-catalogue .new-chip {
    background: linear-gradient(135deg, #ff9800, #f4511e); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px; position: relative; top: -3px;
}
.chamber-catalogue .cat-head .who { width: 100%; margin-top: 6px; color: #5a6577; font-size: 15px; }

.chamber-catalogue .grid {
    margin-top: 26px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px;
}
.chamber-catalogue .card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(30, 42, 58, .08);
    display: flex; flex-direction: column; border: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}
.chamber-catalogue .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(30, 42, 58, .14); }
.chamber-catalogue .card-img {
    background: #fff; padding: 18px;
    display: flex; align-items: center; justify-content: center; height: 230px;
}
.chamber-catalogue .card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.chamber-catalogue .card-body { padding: 20px 22px 22px; border-top: 1px solid #eef2f6; flex: 1; display: flex; flex-direction: column; }
.chamber-catalogue .model-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chamber-catalogue .model-row h3 { font-size: 21px; font-weight: 700; color: #1e2a3a; }
.chamber-catalogue .ata {
    background: #27AAE1; color: #fff; font-size: 12px; font-weight: 500;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.chamber-catalogue .type { color: #5a6577; font-size: 14px; margin-top: 4px; }

.chamber-catalogue .section-label {
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    color: #8a9bae; margin: 15px 0 6px; font-weight: 500;
}
.chamber-catalogue .dims { display: flex; gap: 10px; flex-wrap: wrap; }
.chamber-catalogue .dim {
    background: #f4f7fa; border: 1px solid #e3eaf1; border-radius: 8px;
    padding: 8px 12px; text-align: center; flex: 1; min-width: 90px;
}
.chamber-catalogue .dim .axis { display: block; font-size: 11px; color: #8a9bae; text-transform: uppercase; }
.chamber-catalogue .dim .val { font-size: 14px; font-weight: 500; color: #1e2a3a; white-space: nowrap; }

.chamber-catalogue .sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.chamber-catalogue .size-chip {
    background: #eaf6fc; color: #1a7fb0; border: 1px solid #bfe4f5;
    border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 500;
}

.chamber-catalogue .highlights { display: flex; gap: 8px; flex-wrap: wrap; }
.chamber-catalogue .hl-chip {
    background: #f0faf4; color: #1f8a4c; border: 1px solid #bfe8cf;
    border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 500;
}

.chamber-catalogue .review-note {
    margin-top: 14px; background: #fff8e1; border: 1px solid #ffe082;
    border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #7a5c00;
}
.chamber-catalogue .card-cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef2f6; }
.chamber-catalogue .card-cta .btn { display: block; text-align: center; padding: 11px 20px; font-size: 14px; }

/* ---------- Interior experience band ---------- */
.chamber-catalogue .experience { background: #1e2a3a; margin-top: 72px; padding: 64px 20px; color: #fff; }
.chamber-catalogue .experience-inner { max-width: 1200px; margin: 0 auto; }
.chamber-catalogue .experience-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.chamber-catalogue .experience-head h2 { color: #fff; font-size: 30px; font-weight: 700; }
.chamber-catalogue .experience-head p { margin-top: 10px; color: #b8c9d8; font-size: 15.5px; line-height: 1.6; }
.chamber-catalogue .experience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.chamber-catalogue .exp-card { position: relative; border-radius: 14px; overflow: hidden; min-height: 320px; margin: 0; }
.chamber-catalogue .exp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.chamber-catalogue .exp-card:hover img { transform: scale(1.04); }
.chamber-catalogue .exp-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20, 30, 44, .8) 0%, rgba(20, 30, 44, .05) 55%);
}
.chamber-catalogue .exp-card figcaption {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 22px 24px;
}
.chamber-catalogue .exp-card figcaption h3 { color: #fff; font-size: 19px; font-weight: 700; }
.chamber-catalogue .exp-card figcaption p { margin-top: 5px; font-size: 13.5px; color: #cfe0ee; line-height: 1.5; }

.chamber-catalogue .gallery-grid {
    margin-top: 24px; display: grid;
    grid-template-columns: repeat(6, 1fr); gap: 24px;
}
.chamber-catalogue .gal-item {
    grid-column: span 2; border-radius: 14px; overflow: hidden; height: 250px;
}
.chamber-catalogue .gal-item:nth-child(4),
.chamber-catalogue .gal-item:nth-child(5) { grid-column: span 3; height: 320px; }
.chamber-catalogue .gal-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.chamber-catalogue .gal-item:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
    .chamber-catalogue .gal-item,
    .chamber-catalogue .gal-item:nth-child(4),
    .chamber-catalogue .gal-item:nth-child(5) { grid-column: span 6; height: 260px; }
}

/* ---------- What's included ---------- */
.chamber-catalogue .included { max-width: 1200px; margin: 64px auto 0; padding: 0 20px; text-align: center; }
.chamber-catalogue .included h2 { font-size: 26px; font-weight: 700; color: #1e2a3a; }
.chamber-catalogue .included > p { margin-top: 8px; color: #5a6577; font-size: 15px; }
.chamber-catalogue .included-grid {
    margin-top: 28px; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}
.chamber-catalogue .inc-item {
    background: #fff; border: 1px solid #e3eaf1; border-radius: 12px; padding: 22px 16px;
}
.chamber-catalogue .inc-item .ico { font-size: 26px; }
.chamber-catalogue .inc-item h3 { margin-top: 10px; font-size: 15px; font-weight: 600; color: #1e2a3a; }
.chamber-catalogue .inc-item p { margin-top: 5px; font-size: 12.5px; color: #8a9bae; line-height: 1.45; }

/* ---------- Enquiry CTA ---------- */
.chamber-catalogue .enquire {
    max-width: 1200px; margin: 64px auto; padding: 0 20px; scroll-margin-top: 24px;
}
.chamber-catalogue .enquire-inner {
    background: linear-gradient(135deg, #1e2a3a 0%, #27547a 100%);
    border-radius: 18px; padding: 52px 40px; text-align: center; color: #fff;
}
.chamber-catalogue .enquire-inner h2 { color: #fff; font-size: 30px; font-weight: 700; }
.chamber-catalogue .enquire-inner p { margin-top: 12px; color: #cfe6f5; font-size: 15.5px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.chamber-catalogue .enquire-inner .btn { margin-top: 26px; }

@media (max-width: 640px) {
    .chamber-catalogue .cc-hero { height: 60vh; }
    .chamber-catalogue .cc-hero-caption { padding: 0 20px 76px; }
    .chamber-catalogue .cats { margin-top: -40px; }
}