/* /our-journey/ page — phase 1. EN-only; RTL-safe via logical props. */

.hb-journey-page { background: #fff; color: #2b2415; }
.hb-journey-article { max-width: 980px; margin: 0 auto; padding: 0 20px 60px; }

/* Hero */
.hb-journey-hero { text-align: center; padding: 48px 16px 36px; border-bottom: 1px solid #f0ead8; }
.hb-journey-hero__eyebrow { color: #b8924a; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px; }
.hb-journey-hero__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 5vw, 42px); margin: 0 0 12px; font-weight: 600; }
.hb-journey-hero__intro { color: #666; max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.6; }

/* Section header (shared) */
.hb-journey-section { padding: 40px 0; border-bottom: 1px solid #f0ead8; }
.hb-journey-section:last-of-type { border-bottom: 0; }
.hb-journey-section__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 24px; }
.hb-journey-section__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; margin: 0; font-weight: 600; }
.hb-journey-section__rule { flex: 1; height: 1px; background: #e6e0d2; }
.hb-journey-section__count { color: #b8924a; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }

/* Timeline */
.hb-journey-timeline__list { list-style: none; padding: 0; margin: 0; }
.hb-journey-timeline__row { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid #f3eee0; align-items: flex-start; }
.hb-journey-timeline__row:last-child { border-bottom: 0; }
.hb-journey-timeline__year { flex: 0 0 80px; font-family: Georgia, serif; font-weight: 700; color: #b8924a; font-size: 22px; }
.hb-journey-timeline__body { flex: 1; min-width: 0; }
.hb-journey-timeline__title { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: #2b2415; }
.hb-journey-timeline__desc { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 10px; }
.hb-journey-timeline__more { color: #b8924a; font-size: 13px; font-weight: 600; text-decoration: none; }
.hb-journey-timeline__more:hover { text-decoration: underline; }
.hb-journey-timeline__thumb { flex: 0 0 130px; width: 130px; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; position: relative; background: #1a1a1a; }
.hb-journey-timeline__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-journey-timeline__thumb.is-video::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.25); }
.hb-journey-timeline__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; text-shadow: 0 2px 6px rgba(0,0,0,0.5); z-index: 1; }

@media (max-width: 640px) {
    .hb-journey-timeline__row { flex-wrap: wrap; }
    .hb-journey-timeline__year { flex: 0 0 100%; font-size: 18px; }
    .hb-journey-timeline__body { flex: 1 1 100%; }
    .hb-journey-timeline__thumb { flex: 0 0 100%; width: 100%; aspect-ratio: 16/9; margin-top: 10px; }
}

/* Timeline — alternating-spine variant (desktop / tablet only).
   Activated by the .hb-journey-timeline--desktop-spine class which is
   emitted from PHP based on the admin Layout setting. Default single-
   column behaviour above is unchanged for sites that keep the default. */
@media (min-width: 641px) {
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__list { position: relative; padding: 0; margin: 0; }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__list::before {
        content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
        width: 2px; background: #e6d4a8; transform: translateX(-50%);
    }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px;
        padding: 28px 0; border-bottom: 0; position: relative; align-items: start;
    }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row::before {
        content: ''; position: absolute; left: 50%; top: 36px;
        width: 14px; height: 14px; background: #b8924a; border-radius: 50%;
        border: 3px solid #fff; box-shadow: 0 0 0 1px #e6d4a8;
        transform: translateX(-50%); z-index: 1;
    }
    /* Odd rows: content cluster on LEFT side of the spine. */
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row:nth-child(odd) > * { grid-column: 1; text-align: right; }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row:nth-child(odd) .hb-journey-timeline__thumb,
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row:nth-child(odd) .hb-journey-timeline__more { margin-left: auto; }
    /* Even rows: content cluster on RIGHT side. */
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row:nth-child(even) > * { grid-column: 2; text-align: left; }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row:nth-child(even) .hb-journey-timeline__thumb,
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__row:nth-child(even) .hb-journey-timeline__more { margin-right: auto; }
    /* Reset child flex hints so grid layout takes over cleanly. */
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__year { flex: none; width: auto; font-size: 26px; margin-bottom: 6px; }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__body { flex: none; min-width: 0; }
    .hb-journey-timeline--desktop-spine .hb-journey-timeline__thumb { flex: none; width: 100%; max-width: 260px; aspect-ratio: 16/9; margin-top: 14px; }
}

/* Timeline — left-aligned spine variant (mobile only). */
@media (max-width: 640px) {
    .hb-journey-timeline--mobile-spine .hb-journey-timeline__list { position: relative; padding: 0; }
    .hb-journey-timeline--mobile-spine .hb-journey-timeline__list::before {
        content: ''; position: absolute; inset-inline-start: 14px; top: 0; bottom: 0;
        width: 2px; background: #e6d4a8;
    }
    .hb-journey-timeline--mobile-spine .hb-journey-timeline__row {
        padding-inline-start: 36px; padding-inline-end: 0; border-bottom: 0; position: relative;
    }
    .hb-journey-timeline--mobile-spine .hb-journey-timeline__row::before {
        content: ''; position: absolute; inset-inline-start: 8px; top: 20px;
        width: 14px; height: 14px; background: #b8924a; border-radius: 50%;
        border: 3px solid #fff; box-shadow: 0 0 0 1px #e6d4a8;
    }
}

/* Gallery */
.hb-journey-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hb-journey-gallery__cell { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #f3eee0; }
.hb-journey-gallery__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) { .hb-journey-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hb-journey-gallery__grid { grid-template-columns: repeat(2, 1fr); } }

/* Videos */
.hb-journey-videos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hb-journey-videos__cell { position: relative; }
.hb-journey-videos__thumb { width: 100%; aspect-ratio: 16/9; position: relative; border: 0; padding: 0; background: #1a1a1a; cursor: pointer; overflow: hidden; border-radius: 4px; display: block; }
.hb-journey-videos__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: opacity 0.2s; }
.hb-journey-videos__thumb:hover img { opacity: 1; }
.hb-journey-videos__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; }
.hb-journey-videos__cell iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 4px; }

@media (max-width: 900px) { .hb-journey-videos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hb-journey-videos__grid { grid-template-columns: 1fr; } }

/* Reels — wraps to multiple rows; never horizontal-scrolls. */
.hb-journey-reels__rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.hb-journey-reels__cell { aspect-ratio: 9/16; border-radius: 6px; overflow: hidden; position: relative; background: #1a1a1a; text-decoration: none; display: block; }
.hb-journey-reels__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-journey-reels__out { position: absolute; top: 8px; inset-inline-end: 8px; background: rgba(0,0,0,0.5); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }