/**
 * About page (page-about.php) — dedicated stylesheet, new file so
 * main.css stays untouched (same approach as assets/css/footer.css and
 * assets/css/gallery.css). Reuses existing design tokens (colors,
 * fonts, radii, transitions, spacing utilities like .pt-60/.pb-90) and
 * existing patterns (.overlay, .btn-whtapp, .r-10) rather than inventing
 * new ones — only page-specific layout/animation rules live here.
 *
 * Loaded after main.css via an explicit enqueue dependency (inc/enqueue.php).
 */

/* ---- Eyebrow label (color set per-use via .t-green / .t-wht) ---- */
.tm-about-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

/* ---- Hero ---- */
.tm-about-hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
}

.tm-about-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: tm-about-hero-zoom 24s ease-in-out infinite alternate;
}

@keyframes tm-about-hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.tm-about-hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
}

.tm-about-hero-content .container {
    width: 100%;
}

.tm-about-hero-content h1 {
    margin: 0 0 24px;
}

.tm-about-hero-content p.t-24 {
    max-width: 560px;
    margin: 0 auto;
}

.tm-about-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 36px;
    z-index: 1;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid var(--pwhite);
    border-radius: 14px;
}

.tm-about-scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    background: var(--pwhite);
    border-radius: 2px;
    animation: tm-about-scroll-dot 1.8s ease-in-out infinite;
}

@keyframes tm-about-scroll-dot {
    0%   { opacity: 1; transform: translateY(0); }
    70%  { opacity: 0; transform: translateY(14px); }
    100% { opacity: 0; transform: translateY(14px); }
}

/* ---- Story / Architecture (shared prose + image treatment) ---- */
.tm-about-story-content h2,
.tm-about-architecture > .container h2 {
    margin: 0 0 24px;
}

.tm-about-story-text p,
.tm-about-architecture-text p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.tm-about-story-text p:last-child,
.tm-about-architecture-text p:last-child {
    margin-bottom: 0;
}

.tm-about-story-image,
.tm-about-architecture-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.tm-about-pull-quote {
    font-family: 'IvyMode', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--green);
    border-left: 3px solid var(--green);
    padding-left: 20px;
    margin: 32px 0 0;
}

/* ---- Built Around Nature ---- */
.tm-about-nature {
    padding-top: 100px;
    padding-bottom: 100px;
}

.tm-about-nature-header {
    max-width: 640px;
    margin: 0 auto 50px;
}

.tm-about-nature-header h2 {
    margin: 0 0 16px;
}

/* Card grid — real CSS Grid, not Bootstrap's flexbox .row/.col-*. The
   previous flex version set `height: 100%` on each card so it would
   fill its column, but Bootstrap rows stretch every column in a row to
   match the tallest one (align-items: stretch by default) — with a
   percentage-height card inside a stretched column, the card's
   margin-bottom got consumed by that same stretch calculation instead
   of adding real space below it, so row 2 rendered flush against row 1.
   Grid's own `gap` isn't a margin on the child at all — it's space the
   grid container itself reserves between tracks — so it can't be
   swallowed by a child's height/stretch behavior the same way, and
   `align-items: start` (instead of grid's own default stretch) keeps
   card height driven purely by content. Desktop 992px+ / tablet
   768-991px / mobile <768px, matching the grid's own 3→2→1 column
   breakpoints rather than the theme's single 991px breakpoint. */
.tm-about-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 32px;
    align-items: start;
}

.tm-feature-card {
    height: auto;
    min-height: 280px;
    background-color: var(--pwhite);
    border-radius: var(--radius-md);
    padding: 36px 28px;
    text-align: center;
    transition: var(--transition-base);
}

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

.tm-feature-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    color: var(--green);
}

.tm-feature-card-icon svg,
.tm-feature-card-icon img {
    width: 100%;
    height: 100%;
}

.tm-feature-card h5 {
    color: var(--green);
    margin-bottom: 10px;
}

.tm-feature-card p {
    font-size: 16px;
    margin: 0;
    opacity: 0.85;
}

/* ---- Philosophy / Promise / CTA (full-width background sections) ----
   Text color here can't rely on the shared .overlay/.t-wht classes alone:
   main.css's `p, a { color: var(--black); }` is a type-selector rule, and
   a type selector on the <p> itself always beats an inherited color from
   an ancestor (specificity, not source order) — so wysiwyg-rendered
   paragraphs (plain, class-less <p> tags from wp_kses_post()) inside a
   "t-wht" wrapper div still rendered black. Fixed by setting the color
   explicitly on every paragraph in these sections instead of depending
   on inheritance. */
.tm-about-philosophy,
.tm-about-promise,
.tm-about-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 140px 0;
}

.tm-about-philosophy .overlay,
.tm-about-promise .overlay,
.tm-about-cta .overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}

.tm-about-philosophy-content,
.tm-about-promise-content,
.tm-about-cta-content {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.tm-about-philosophy h2,
.tm-about-promise h2,
.tm-about-cta h2 {
    color: var(--pwhite);
}

.tm-about-philosophy-text p,
.tm-about-promise-text p,
.tm-about-cta-content p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
}

.tm-about-philosophy-content {
    max-width: 740px;
    text-align: center;
}

.tm-about-philosophy-content h2 {
    margin-bottom: 28px;
}

.tm-about-promise-content {
    max-width: 720px;
}

.tm-about-promise-content h2 {
    margin-bottom: 24px;
}

.tm-about-promise-text p {
    font-size: 20px;
    margin-bottom: 8px;
}

.tm-about-promise-content .btn-whtapp {
    margin-top: 28px;
}

.tm-about-cta-content {
    max-width: 720px;
}

.tm-about-cta-content h2 {
    margin-bottom: 20px;
}

.tm-about-cta-content p {
    margin-bottom: 32px;
}

.tm-about-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.tm-about-cta-buttons .btn-whtapp {
    margin-top: 0;
}

.tm-about-btn-outline {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pwhite);
    background-color: transparent;
    border: 1.5px solid var(--pwhite);
    border-radius: var(--radius-xs);
    padding: 10px 20px;
    transition: var(--transition-base);
}

.tm-about-btn-outline:hover {
    background-color: var(--pwhite);
    color: var(--green);
}

/* ---- Quote ---- */
.tm-about-quote-text {
    font-family: 'IvyMode', sans-serif;
    font-style: italic;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--green);
    max-width: 800px;
    margin: 0 auto;
}

.tm-about-quote-author {
    margin: 24px 0 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--black);
    opacity: 0.7;
}

@media screen and (max-width: 991px) {
    .tm-about-hero {
        height: 90vh;
    }

    .tm-about-story-image,
    .tm-about-architecture-image {
        height: 320px;
    }

    .tm-about-nature {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .tm-about-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 24px;
    }

    .tm-about-philosophy,
    .tm-about-promise,
    .tm-about-cta {
        background-attachment: scroll;
        padding: 90px 0;
    }

    .tm-about-quote-text {
        font-size: 26px;
    }

    .tm-about-pull-quote {
        font-size: 22px;
    }

    .tm-feature-card {
        padding: 28px 20px;
    }
}

/* True mobile tier (320-768px), distinct from the 768-991px tablet
   values above — a consistent 64px section rhythm, 24px container
   padding, a tighter type scale, and full-width buttons, rather than a
   scaled-down copy of the desktop/tablet layout. Loaded after (and so
   correctly overrides) the shared max-width:991px block above for any
   property both blocks touch. */
@media screen and (max-width: 767px) {
    /* Section 2: standardize outer spacing/container padding. */
    .tm-about-hero .container,
    .tm-about-story .container,
    .tm-about-nature .container,
    .tm-about-architecture .container,
    .tm-about-philosophy .container,
    .tm-about-quote .container,
    .tm-about-promise .container,
    .tm-about-cta .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .tm-about-story,
    .tm-about-architecture,
    .tm-about-nature,
    .tm-about-quote,
    .tm-about-philosophy,
    .tm-about-promise,
    .tm-about-cta {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Section 6: type scale. */
    .tm-about-eyebrow {
        font-size: 13px;
    }

    .tm-about-story-content h2,
    .tm-about-nature-header h2,
    .tm-about-architecture > .container h2,
    .tm-about-philosophy h2,
    .tm-about-promise h2,
    .tm-about-cta h2 {
        font-size: 34px;
    }

    .tm-feature-card h5 {
        font-size: 26px;
    }

    /* Section 3: image + text sections. */
    .tm-about-story .row,
    .tm-about-architecture .row {
        row-gap: 24px;
    }

    .tm-about-story-content h2,
    .tm-about-architecture > .container h2 {
        margin-bottom: 16px;
    }

    .tm-about-story-text p,
    .tm-about-architecture-text p {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .tm-about-story-image,
    .tm-about-architecture-image {
        height: auto;
        border-radius: 18px;
    }

    /* Section 1: feature-card grid — 1 per row on mobile (the 2-per-row
       layout tried here previously read as more cramped than readable at
       this width; reverted). Card design/padding/radius/hover untouched
       below — only the column count and gap changed. */
    .tm-about-features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tm-feature-card {
        padding: 24px;
    }

    .tm-feature-card p {
        font-size: 15px;
    }

    /* Section 4: background-image sections. */
    .tm-about-philosophy-content,
    .tm-about-promise-content,
    .tm-about-cta-content {
        width: 90%;
        max-width: 340px;
    }

    .tm-about-philosophy-text p,
    .tm-about-promise-text p,
    .tm-about-cta-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    /* Section 7: buttons — scoped to this page's own instances so the
       shared .btn-whtapp class isn't resized site-wide (room cards,
       single-room booking, etc. all reuse it outside the About page). */
    .tm-about-promise-content .btn-whtapp,
    .tm-about-cta-buttons .btn-whtapp,
    .tm-about-cta-buttons .tm-about-btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 260px;
        min-height: 52px;
        padding: 0 28px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- Homepage About section (template-parts/sections/about.php) ----
   A short intro (image left, content right) pointing to the About page
   for the full brand story — 2 paragraphs, not the whole narrative.
   Text column capped at ~620px for comfortable line length; each
   paragraph is a real <p> (about_content uses ACF's wpautop new_lines
   setting, not raw <br> soup) so per-paragraph spacing below is
   meaningful. Image wrapper owns height + radius so the photo fills a
   fixed box regardless of its own aspect ratio — same technique as
   assets/css/rooms.css (.tm-room-image-wrap), new class here since this
   section owns its own CSS file rather than reaching into rooms.css. */
.tm-home-about-content {
    max-width: 620px;
}

.tm-home-about-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--green);
    margin-bottom: 16px;
}

.tm-home-about-content h2 {
    margin-bottom: 20px;
}

.tm-home-about-body p {
    line-height: 1.8;
    margin-bottom: 22px;
}

.tm-home-about-body p:last-child {
    margin-bottom: 0;
}

.tm-home-about-image-wrap {
    height: 520px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.tm-home-about-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media screen and (max-width: 991px) {
    .tm-home-about-image-wrap {
        height: 420px;
    }
}

@media screen and (max-width: 767px) {
    .tm-home-about-image-wrap {
        height: 300px;
    }
}

.tm-home-about-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: 15px;
    font-weight: 600;
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

.tm-home-about-link:hover {
    color: var(--black);
}

/* ---- Homepage Philosophy section (template-parts/sections/philosophy.php) ----
   Full-width background image, dark overlay, centered short-form
   statement — visually the same full-width-statement pattern as the
   About page's own Promise/CTA sections (.tm-about-promise/.tm-about-cta,
   further up this file), new classes because this is a separate section
   with its own content/background, not a shared component. */
.tm-home-philosophy {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 140px 0;
}

.tm-home-philosophy .overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

.tm-home-philosophy-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.tm-home-philosophy-content h2 {
    color: var(--pwhite);
    margin-bottom: 32px;
}

.tm-home-philosophy-lines p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.tm-home-philosophy-lines p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .tm-home-philosophy {
        padding: 90px 0;
        background-attachment: scroll;
    }

    .tm-home-philosophy-lines p {
        font-size: 18px;
    }
}