/* Inner pages: services, transport, destinations, circuit detail, privacy policy.
   Colors come from the theme variables defined in frontend.css. */

/* ---------- Hero ---------- */

.pg-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(460px, 68vh, 640px); overflow: hidden; isolation: isolate; color: #fff; background: var(--night); }
.pg-hero__image,
.pg-hero__photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; background-position: center; background-size: cover; object-fit: cover; animation: pg-hero-settle 14s ease-out both; }
.pg-hero::before { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(var(--night-rgb), .58) 0%, rgba(var(--night-rgb), .16) 38%, rgba(var(--night-rgb), .9) 100%), linear-gradient(90deg, rgba(var(--night-rgb), .55), transparent 72%); }
.pg-hero--services .pg-hero__image { background-image: url('../img/web/banner-services-angkor-wat.jpg'); }
.pg-hero--transport .pg-hero__image { background-image: url('../img/web/banner-transport-tuk-tuk.jpg'); }
.pg-hero--destinations .pg-hero__image { background-image: url('../img/web/banner-destinations-mekong.jpg'); }
.pg-hero--plain { min-height: clamp(380px, 52vh, 480px); background: radial-gradient(60% 90% at 100% 0%, rgba(var(--gold-rgb), .2), transparent 70%), radial-gradient(70% 100% at 0% 100%, rgba(var(--coral-rgb), .5), transparent 70%), linear-gradient(120deg, var(--night), var(--forest-deep)); }
.pg-hero--plain::before { content: none; }

.pg-hero__inner { padding: 130px 0 clamp(40px, 6vw, 72px); }
.pg-hero__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; color: rgba(255, 255, 255, .7); font-size: 12px; }
.pg-hero__crumbs a { color: inherit; text-decoration: none; transition: color 180ms ease; }
.pg-hero__crumbs a:hover { color: #fff; }
.pg-hero .eyebrow { margin: 0 0 16px; color: var(--gold-soft); }
.pg-hero h1 { max-width: 900px; margin: 0; font-family: var(--display); font-size: clamp(40px, 6vw, 80px); font-weight: 500; letter-spacing: -.02em; line-height: 1.03; }
.pg-hero__lead { max-width: 560px; margin: 20px 0 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.75; }
.pg-hero__stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.pg-hero__stats li { display: flex; align-items: baseline; gap: 10px; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pg-hero__stats strong { color: var(--gold-soft); font-family: var(--serif); font-size: 21px; font-style: italic; font-weight: 400; line-height: 1; }
.pg-hero__stats span { color: rgba(255, 255, 255, .88); font-size: 12px; }

@keyframes pg-hero-settle {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* ---------- Sections ---------- */

.pg-section { padding: clamp(72px, 8vw, 112px) 0; }
.pg-section--tint { background: var(--paper-deep); }
.pg-section--flush-top { padding-top: 0; }

/* ---------- Transport: photo cards ---------- */

.pg-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pg-mode { position: relative; display: flex; align-items: flex-end; min-height: 540px; overflow: hidden; isolation: isolate; border-radius: 28px; color: #fff; background: var(--night); box-shadow: 0 30px 60px -34px rgba(36, 19, 24, .55); transition: transform 320ms ease, box-shadow 320ms ease; }
.pg-mode:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -34px rgba(36, 19, 24, .65); }
.pg-mode img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms ease; }
.pg-mode:hover img { transform: scale(1.07); }
.pg-mode::before { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(var(--night-rgb), .3) 0%, transparent 34%, rgba(var(--night-rgb), .94) 100%); }
.pg-mode__index { position: absolute; top: 24px; left: 26px; color: var(--gold-soft); font-family: var(--serif); font-size: 28px; font-style: italic; line-height: 1; }
.pg-mode__label { position: absolute; top: 20px; right: 20px; padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(var(--night-rgb), .45); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pg-mode__body { padding: 30px 28px 32px; }
.pg-mode__body::before { display: block; width: 40px; height: 3px; margin-bottom: 18px; content: ''; border-radius: 3px; background: var(--gold); transition: width 420ms ease; }
.pg-mode:hover .pg-mode__body::before { width: 84px; }
.pg-mode h3 { margin: 0 0 10px; font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.12; }
.pg-mode p { margin: 0; color: rgba(255, 255, 255, .84); font-size: 14px; line-height: 1.75; }

.pg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.pg-tile { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 18px; padding: 26px; border: 1px solid rgba(36, 19, 24, .08); border-radius: 22px; background: #fff; box-shadow: 0 18px 42px rgba(36, 19, 24, .05); transition: transform 260ms ease, border-color 260ms ease; }
.pg-tile:hover { transform: translateY(-5px); border-color: rgba(var(--forest-rgb), .3); }
.pg-tile__icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: rgba(var(--forest-rgb), .09); color: var(--forest); transition: background 260ms ease, color 260ms ease; }
.pg-tile:hover .pg-tile__icon { background: var(--forest); color: #fff; }
.pg-tile h3 { margin: 4px 0 6px; font-family: var(--display); font-size: 18px; font-weight: 700; }
.pg-tile p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

/* ---------- Destinations: mosaic ---------- */

.pg-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 280px; gap: 18px; }
.pg-bento__item { position: relative; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; border-radius: 26px; color: #fff; background: var(--night); text-decoration: none; box-shadow: 0 24px 50px -30px rgba(36, 19, 24, .5); }
.pg-bento__item:first-child { grid-column: span 2; grid-row: span 2; }
.pg-bento__item:nth-child(2):last-child { grid-column: span 2; grid-row: span 2; }
.pg-bento:has(.pg-bento__item:nth-child(3):last-child) .pg-bento__item:not(:first-child),
.pg-bento__item:nth-child(4):last-child { grid-column: span 2; }
.pg-bento__item img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms ease; }
.pg-bento__item:hover img { transform: scale(1.07); }
.pg-bento__item::before { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(var(--night-rgb), .22) 0%, transparent 36%, rgba(var(--night-rgb), .92) 100%); transition: background 320ms ease; }
.pg-bento__index { position: absolute; top: 20px; left: 22px; color: var(--gold-soft); font-family: var(--serif); font-size: 24px; font-style: italic; line-height: 1; }
.pg-bento__arrow { position: absolute; top: 16px; right: 16px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(var(--night-rgb), .3); font-size: 15px; transition: background 260ms ease, color 260ms ease, border-color 260ms ease, transform 260ms ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pg-bento__item:hover .pg-bento__arrow { border-color: var(--gold); background: var(--gold); color: var(--night); transform: rotate(45deg); }
.pg-bento__copy { display: grid; gap: 8px; padding: 24px; }
.pg-bento__region { color: var(--gold-soft); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pg-bento__name { font-family: var(--display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.1; }
.pg-bento__item:first-child .pg-bento__name { font-size: clamp(30px, 3.4vw, 46px); }
.pg-bento__desc { max-width: 420px; color: rgba(255, 255, 255, .84); font-size: 13px; line-height: 1.7; }
.pg-bento__item:first-child .pg-bento__copy { padding: 34px; }
.pg-bento__item:first-child .pg-bento__desc { font-size: 15px; }

@media (hover: hover) and (min-width: 901px) {
    .pg-bento__item:not(:first-child) .pg-bento__desc { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms ease, opacity 360ms ease; }
    .pg-bento__item:not(:first-child):hover .pg-bento__desc,
    .pg-bento__item:not(:first-child):focus-visible .pg-bento__desc { max-height: 120px; opacity: 1; }
}

/* ---------- Call to action panel ---------- */

.pg-cta { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 84px) clamp(28px, 6vw, 84px); border-radius: 32px; color: #fff; background: radial-gradient(60% 90% at 100% 0%, rgba(var(--gold-rgb), .22), transparent 70%), radial-gradient(70% 100% at 0% 100%, rgba(var(--coral-rgb), .5), transparent 70%), linear-gradient(120deg, var(--night), var(--forest-deep)); text-align: center; box-shadow: 0 34px 70px -36px rgba(var(--night-rgb), .7); }
.pg-cta .eyebrow { margin: 0 0 16px; color: var(--gold); }
.pg-cta h2 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4.6vw, 58px); font-weight: 500; line-height: 1.06; }
.pg-cta h2 em { color: var(--gold-soft); font-family: var(--serif); font-weight: 400; }
.pg-cta > p:not(.eyebrow) { max-width: 560px; margin: 18px auto 0; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.8; }
.pg-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.pg-cta .button--ghost { border: 1px solid rgba(255, 255, 255, .42); color: #fff; background: transparent; }
.pg-cta .button--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.pg-cta .button--ghost span { color: var(--gold); }

/* ---------- Circuit detail ---------- */

.pg-trip__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 32px; }
.pg-trip__head h2 { margin: 14px 0 0; font-family: var(--display); font-size: clamp(32px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; }
.pg-trip__head h2 em { color: var(--coral); font-family: var(--serif); font-weight: 400; }
.pg-trip__head .button--dark span { color: var(--gold); }
.pg-trip__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 clamp(36px, 5vw, 56px); overflow: hidden; border: 1px solid rgba(36, 19, 24, .08); border-radius: 22px; background: var(--paper-deep); }
.pg-trip__facts div { display: grid; gap: 6px; padding: 22px 28px; }
.pg-trip__facts div + div { border-left: 1px solid rgba(36, 19, 24, .1); }
.pg-trip__facts dt { color: var(--forest); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pg-trip__facts dd { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 700; }

/* Day cards: three per row; a last row of two or one stretches to fill the width. */
.pg-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.pg-day { position: relative; grid-column: span 2; overflow: hidden; padding: 30px 28px 34px; border: 1px solid rgba(36, 19, 24, .09); border-radius: 24px; background: #fff; box-shadow: 0 18px 42px rgba(36, 19, 24, .06); transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; }
.pg-day:nth-child(3n+1):nth-last-child(2),
.pg-day:nth-child(3n+2):last-child { grid-column: span 3; }
.pg-day:nth-child(3n+1):last-child { grid-column: span 6; }
.pg-day::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ''; background: linear-gradient(90deg, var(--forest), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 420ms ease; }
.pg-day:hover { transform: translateY(-8px); border-color: rgba(var(--forest-rgb), .3); box-shadow: 0 28px 56px rgba(36, 19, 24, .12); }
.pg-day:hover::after { transform: scaleX(1); }
.pg-day__number { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; color: var(--forest); font-family: var(--serif); font-size: 44px; font-style: italic; line-height: 1; }
.pg-day__number::after { flex: 1 1 auto; height: 1px; content: ''; background: linear-gradient(90deg, rgba(var(--forest-rgb), .45), transparent); }
.pg-day__label { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(var(--forest-rgb), .08); color: var(--forest); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background 260ms ease, color 260ms ease; }
.pg-day:hover .pg-day__label { background: var(--forest); color: #fff; }
.pg-day h3 { margin: 0 0 8px; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.2; }
.pg-day p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }

/* ---------- Privacy policy ---------- */

.pg-legal { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: clamp(32px, 6vw, 80px); }
.pg-legal__toc { position: sticky; top: 110px; padding: 24px; border-radius: 22px; background: var(--paper-deep); }
.pg-legal__toc p { margin: 0 0 14px; color: var(--forest); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pg-legal__toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: legal; }
.pg-legal__toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-size: 13px; line-height: 1.45; text-decoration: none; transition: background 200ms ease, color 200ms ease; counter-increment: legal; }
.pg-legal__toc a::before { color: var(--coral); font-family: var(--serif); font-style: italic; content: counter(legal, decimal-leading-zero); }
.pg-legal__toc a:hover { background: #fff; color: var(--forest); }
.pg-legal__sections { display: grid; gap: 18px; }
.pg-legal__section { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 30px 32px 32px; border: 1px solid rgba(36, 19, 24, .08); border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(36, 19, 24, .05); scroll-margin-top: 110px; }
.pg-legal__number { color: rgba(var(--forest-rgb), .28); font-family: var(--serif); font-size: 40px; font-style: italic; line-height: 1; }
.pg-legal__section h2 { margin: 4px 0 12px; font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 1.2; }
.pg-legal__section p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.pg-legal__section a { color: var(--forest); text-underline-offset: 3px; }
.pg-legal__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, var(--night), var(--forest-deep)); }
.pg-legal__contact h2 { margin: 0 0 6px; font-family: var(--display); font-size: 22px; font-weight: 600; }
.pg-legal__contact p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.7; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1000px) {
    .pg-modes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pg-mode { min-height: 460px; }
    .pg-mode:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .pg-tiles { grid-template-columns: minmax(0, 1fr); }
    .pg-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 260px; }
    .pg-bento__item:first-child { grid-row: span 1; }
    .pg-bento .pg-bento__item:not(:first-child) { grid-column: span 1; }
    .pg-bento .pg-bento__item:last-child:nth-child(even) { grid-column: span 2; }
    .pg-legal { grid-template-columns: minmax(0, 1fr); }
    .pg-legal__toc { position: static; }
    .pg-days { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pg-days .pg-day { grid-column: span 1 !important; }
    .pg-days .pg-day:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}

@media (max-width: 680px) {
    .pg-hero { min-height: 430px; }
    .pg-hero__inner { padding: 118px 0 40px; }
    .pg-hero h1 { font-size: clamp(36px, 10.5vw, 52px); }
    .pg-hero__lead { font-size: 15px; }
    .pg-hero__stats { gap: 8px; margin-top: 26px; }
    .pg-hero__stats li { padding: 9px 14px; }
    .pg-modes { grid-template-columns: minmax(0, 1fr); }
    .pg-mode { min-height: 420px; border-radius: 22px; }
    .pg-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; }
    .pg-bento .pg-bento__item, .pg-bento .pg-bento__item:first-child { grid-column: 1 / -1; }
    .pg-bento__item:first-child .pg-bento__copy { padding: 24px; }
    .pg-cta { border-radius: 24px; }
    .pg-trip__facts { grid-template-columns: minmax(0, 1fr); }
    .pg-trip__facts div + div { border-top: 1px solid rgba(36, 19, 24, .1); border-left: 0; }
    .pg-trip__facts div { padding: 16px 22px; }
    .pg-days { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pg-days .pg-day { grid-column: 1 / -1 !important; padding: 24px 22px 26px; }
    .pg-day__number { margin-bottom: 16px; font-size: 36px; }
    .pg-legal__section { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 24px 22px 26px; }
    .pg-legal__number { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-hero__image, .pg-hero__photo { animation: none; }
}

/* ---------- One banner height for every inner page (the home page hero is separate) ---------- */

.pg-hero,
.pg-hero--plain,
.page-masthead,
.page-masthead--contact,
.page-masthead--privacy { align-items: flex-end; height: 375px; min-height: 0; }

/* Compact content so it fits the 375px banner. */
.pg-hero__inner,
.page-masthead__content,
.contact-hero .page-masthead__content { padding: 96px 0 30px; }
.pg-hero__crumbs { margin-bottom: 12px; }
.pg-hero .eyebrow,
.page-masthead__content .eyebrow { margin-bottom: 10px; }
.pg-hero h1,
.page-masthead__content h1,
.contact-hero .page-masthead__content h1 { max-width: 860px; font-size: clamp(30px, 3.600vw, 48px); line-height: 1.1; text-wrap: balance; }
.pg-hero__lead,
.page-masthead__content > p:last-child,
.contact-hero .page-masthead__content > p:not(.eyebrow) { display: -webkit-box; margin-top: 12px; overflow: hidden; font-size: 15px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pg-hero__stats { display: none; }
.contact-hero .page-masthead__content .button { min-height: 42px; margin-top: 14px; }
.contact-hero .page-masthead__content { padding-top: 84px; padding-bottom: 22px; }
.contact-hero__caption { bottom: 22px; }

@media (max-width: 680px) {
    .pg-hero,
    .pg-hero--plain,
    .page-masthead,
    .page-masthead--contact,
    .page-masthead--privacy { height: 375px; min-height: 0; }
    .pg-hero__inner,
    .page-masthead__content,
    .contact-hero .page-masthead__content { padding: 84px 0 24px; }
    .pg-hero__crumbs { margin-bottom: 8px; font-size: 11px; }
    .pg-hero h1,
    .page-masthead__content h1,
    .contact-hero .page-masthead__content h1 { font-size: clamp(26px, 7.600vw, 34px); }
    .pg-hero__lead,
    .page-masthead__content > p:last-child,
    .contact-hero .page-masthead__content > p:not(.eyebrow) { font-size: 14px; }
    .contact-hero .page-masthead__content .button { display: none; }
}