/* EXPERIENCES — styling matched to the ancient-qx theme.
   Colours and fonts are driven by CSS variables set from the Customize panel
   (with theme-matching fallbacks). Every class is prefixed .exp- to avoid
   colliding with theme styles. */

.exp-grid { display: flex; flex-direction: column; gap: 22px; margin: 0 0 10px; }
.exp-grid.exp-cols-2, .exp-grid.exp-cols-3 { display: grid; gap: 22px; }
.exp-grid.exp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.exp-grid.exp-cols-3 { grid-template-columns: repeat(3, 1fr); }

.exp-card {
    display: block;
    background: var(--exp-card-bg, #fffdf8);
    border: 1px solid var(--exp-border, #e6d9c0);
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(33, 31, 31, .12);
    overflow: hidden;
    text-decoration: none;
    color: var(--exp-text, #5a554f);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.exp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(33, 31, 31, .18); }

.exp-card-img { background: #efe8dd; aspect-ratio: 21 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.exp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-card-imgph { font-family: var(--exp-serif, 'Lustria', Georgia, serif); font-style: italic; color: #a8895f; }

.exp-card-body { padding: 22px 24px 24px; }

.exp-eyebrow { display: block; font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--exp-accent-dark, #b06a2a); font-weight: 700; }

.exp-card-title { font-family: var(--exp-serif, 'Lustria', Georgia, serif); color: var(--exp-title, #211f1f); font-weight: 400; font-size: 25px; line-height: 1.2; margin: 7px 0 10px; }

.exp-card-lead { font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 15.5px; line-height: 1.7; color: var(--exp-text, #5a554f); margin: 0 0 16px; }

.exp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.exp-fact { font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 12px; color: var(--exp-title, #211f1f); background: var(--exp-fact-bg, #fbf7ef); border: 1px solid var(--exp-fact-border, #e9e2d6); border-radius: 999px; padding: 5px 12px; line-height: 1.4; }
.exp-fact em { font-style: normal; text-transform: uppercase; letter-spacing: .6px; font-size: 10px; color: #9a9089; margin-right: 6px; }

.exp-card-lodges { font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 13px; color: #6b655e; margin-bottom: 14px; }
.exp-card-lodges .exp-eyebrow { margin-bottom: 3px; }
.exp-more-lodges { color: var(--exp-accent-dark, #b06a2a); }

.exp-readmore { display: inline-block; font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--exp-accent-dark, #b06a2a); border-bottom: 1px solid var(--exp-accent, #cd7f32); padding-bottom: 2px; }

/* ---- detail page ---- */
.exp-detail-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.exp-detail-lodges { margin: 34px 0; }
.exp-detail-lodges h2 { font-family: var(--exp-serif, 'Lustria', Georgia, serif); color: var(--exp-title, #211f1f); font-weight: 400; }

.exp-lodge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; }
.exp-lodge-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--exp-card-bg, #fffdf8); border: 1px solid var(--exp-border, #e6d9c0); border-radius: 12px; padding: 14px; }
.exp-lodge-thumb { width: 64px; height: 64px; background: #efe8dd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--exp-serif, 'Lustria', Georgia, serif); font-style: italic; font-size: 11px; color: #a8895f; }
.exp-lodge-name { font-family: var(--exp-serif, 'Lustria', Georgia, serif); font-weight: 400; font-size: 18px; color: var(--exp-title, #211f1f); margin: 0 0 4px; }
.exp-lodge-name a { color: var(--exp-title, #211f1f); text-decoration: none; }
.exp-lodge-name a:hover { color: var(--exp-accent-dark, #b06a2a); }
.exp-lodge-blurb { font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 13px; line-height: 1.5; color: #6b655e; margin: 0 0 6px; }
.exp-link { font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--exp-accent-dark, #b06a2a); text-decoration: none; }

.exp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 10px; align-items: center; }
.exp-btn-fill { background: var(--exp-accent, #cd7f32); color: #fff; border: 1px solid var(--exp-accent, #cd7f32); border-radius: 3px; font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; padding: 13px 20px 11px; text-decoration: none; }
.exp-btn-fill:hover { background: var(--exp-accent-dark, #b06a2a); border-color: var(--exp-accent-dark, #b06a2a); }
.exp-btn-out { background: transparent; color: var(--exp-accent-dark, #b06a2a); border: 1px solid var(--exp-accent, #cd7f32); border-radius: 0; font-family: var(--exp-sans, 'Quattrocento Sans', sans-serif); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 13px 20px 11px; text-decoration: none; }
.exp-btn-out:hover { background: var(--exp-accent, #cd7f32); color: #fff; }

/* one-column cards go horizontal on wider screens; multi-column stay vertical */
@media (min-width: 760px) {
    .exp-grid.exp-cols-1 .exp-card { display: grid; grid-template-columns: 300px 1fr; }
    .exp-grid.exp-cols-1 .exp-card-img { aspect-ratio: auto; height: 100%; min-height: 220px; }
}
@media (max-width: 880px) {
    .exp-grid.exp-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .exp-grid.exp-cols-2, .exp-grid.exp-cols-3 { grid-template-columns: 1fr; }
}