/**
 * Last Update: 2026-04-28
 * File: assets/frontend/css/content-body.css
 * Description: Content page + News detail article body styles
 *              Covers: fe-content, fe-news-detail, fe-breadcrumb
 *
 * 2026-04-28: Removed `text-overflow: ellipsis` truncation from
 *             `.fe-breadcrumb__item--current` (was capped at 200px desktop /
 *             140px mobile). Long titles now wrap to multiple lines via
 *             flex-wrap on the parent list.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * SHARED — article body rich text
 * ════════════════════════════════════════════════════════════════════════ */
.fe-content__body,
.fe-news-detail__body {
    max-width: 860px;
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 48px;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--fe-text);
}

/* Rich text from TinyMCE / CMS */
.fe-content__body p,
.fe-news-detail__body p {
    margin-bottom: 1.25rem;
}

.fe-content__body h2,
.fe-news-detail__body h2 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    color: var(--fe-text);
    padding-left: 14px;
}

.fe-content__body h3,
.fe-news-detail__body h3 {
    font-size: 1.2rem;
    margin: 1.75rem 0 0.75rem;
    color: var(--fe-text);
}

.fe-content__body ul,
.fe-content__body ol,
.fe-news-detail__body ul,
.fe-news-detail__body ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    list-style: disc;
}

.fe-content__body ol,
.fe-news-detail__body ol {
    list-style: decimal;
}

.fe-content__body li,
.fe-news-detail__body li {
    margin-bottom: 0.5rem;padding-top: 48px
}

.fe-content__body a,
.fe-news-detail__body a {
    color: var(--fe-gold-600);
    text-decoration: underline;
    transition: color var(--fe-transition);
}

.fe-content__body a:hover,
.fe-news-detail__body a:hover {
    color: var(--fe-gold-500);
}

.fe-content__body img,
.fe-news-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--fe-radius-md);
    margin: 16px 0;
    box-shadow: var(--fe-shadow-md);
}

.fe-content__body blockquote,
.fe-news-detail__body blockquote {
    border-left: 4px solid var(--fe-gold-300);
    margin: 1.5rem 0;
    padding: 16px 24px;
    background-color: var(--fe-bg-section);
    border-radius: 0 var(--fe-radius-md) var(--fe-radius-md) 0;
    font-style: italic;
    color: var(--fe-text-muted);
}

.fe-content__body table,
.fe-news-detail__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.fe-content__body th,
.fe-news-detail__body th {
    background-color: var(--fe-gold-100);
    color: var(--fe-warm-800);
    font-weight: 600;
    padding: 10px 14px;
    border: 1px solid var(--fe-border);
    text-align: left;
}

.fe-content__body td,
.fe-news-detail__body td {
    padding: 10px 14px;
    border: 1px solid var(--fe-border);
    vertical-align: top;
}

.fe-content__body tr:nth-child(even) td,
.fe-news-detail__body tr:nth-child(even) td {
    background-color: var(--fe-bg-alt);
}

/* ══════════════════════════════════════════════════════════════════════════
 * CONTENT PAGE
 * ════════════════════════════════════════════════════════════════════════ */
.fe-content {
    padding-top: 5px;
    padding-bottom: 64px;
}

.fe-content__header {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fe-border-gold);
}

.fe-content__title {
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
    font-weight: 700;
    color: var(--fe-text);
    line-height: 1.3;
    margin-bottom: 20px;
}

.fe-content__thumb {
    margin-top: 24px;
    border-radius: var(--fe-radius-lg);
    overflow: hidden;
    box-shadow: var(--fe-shadow-md);
}

.fe-content__thumb-img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

.fe-content__tags {
    /* Centered tag cluster — mirrors .fe-news-detail__tags layout so
       content pages and news detail pages render tag chips identically.
       flex + justify-content:center keeps chips visually balanced on
       wide screens; flex-wrap+gap handles overflow on narrow ones.
       (Was: bare block container — chips wrapped left-aligned and ugly.) */
    max-width: 860px;
    margin: 32px auto 48px;
    padding: 24px 16px 0;
    border-top: 1px solid var(--fe-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * "servicesText" WIDGET + scoped Bootstrap-utility fallbacks
 *
 * The CMS authoring workflow lets editors paste Bootstrap 5 markup directly
 * into TinyMCE. One widget that ships in many content bodies is the
 * "Consult experts — 6 branches" contact card:
 *
 *   <div class="container" style="max-width:660px">
 *     <div class="card servicesText">
 *       <div class="card-body">
 *         <div class="row row-cols-2 g-3">
 *           <div class="col text-center">
 *             <p class="fw-bold mb-1">...</p>
 *             <img class="img-fluid"> <img class="img-fluid">
 *           </div> ... ×6 ...
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Bootstrap 5 is only loaded on /home (layoutFrontendHome). On every other
 * content page these classes are inert, so the widget renders as an
 * un-styled vertical stack. Re-declare the minimum subset scoped to the
 * `.servicesText` widget so the same body markup works on /home AND on every
 * other content page — without dragging the whole Bootstrap stylesheet
 * (or risking class-name collisions in the global namespace).
 *
 * Scope strategy: everything is scoped under
 *   `.fe-content__body .servicesText` (regular content pages)
 *   `.fe-news-detail__body .servicesText` (news detail pages)
 * The duplicate selectors are deliberate — they keep the rules from leaking
 * outside article body areas (e.g., into admin pages or the home layout).
 * ════════════════════════════════════════════════════════════════════════ */

/* Bootstrap-style .container wrapper — provides width:100% + auto-centering.
   Without these, the inline `max-width: 660px` on the wrapper has nothing
   to center against. */
.fe-content__body .container,
.fe-news-detail__body .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Card chrome (.card + .servicesText share the same element) */
.fe-content__body .servicesText,
.fe-news-detail__body .servicesText {
    background-color: var(--fe-bg-card);
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-lg);
    box-shadow: var(--fe-shadow-sm);
    margin: 24px auto;
}

.fe-content__body .servicesText .card-body,
.fe-news-detail__body .servicesText .card-body {
    padding: 1.25rem 1.5rem 1.75rem;
}

.fe-content__body .servicesText .card-title,
.fe-news-detail__body .servicesText .card-title {
    color: var(--fe-text);
    margin: 0;
}

/* Flex grid: .row + .row-cols-2 + .g-3 (~ 1rem gap) */
.fe-content__body .servicesText .row,
.fe-news-detail__body .servicesText .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}

.fe-content__body .servicesText .row-cols-2 > .col,
.fe-news-detail__body .servicesText .row-cols-2 > .col {
    flex: 1 1 calc(50% - 0.5rem);   /* two-column grid minus half-gap */
    max-width: calc(50% - 0.5rem);
    box-sizing: border-box;
}

/* Mobile: single-column stack */
@media (max-width: 575px) {
    .fe-content__body .servicesText .row-cols-2 > .col,
    .fe-news-detail__body .servicesText .row-cols-2 > .col {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Generic utilities used inside the widget — scoped to .servicesText
   so they don't collide with anything else that might use these
   shorthand names (BEM rules elsewhere are namespaced with `.fe-`). */
.fe-content__body .servicesText .text-center,
.fe-news-detail__body .servicesText .text-center { text-align: center; }

.fe-content__body .servicesText .fw-bold,
.fe-news-detail__body .servicesText .fw-bold { font-weight: 700; }

/* .img-fluid — also override the global .fe-*__body img rule that adds
   border-radius + shadow, which would look noisy on the small icon buttons
   (LINE / phone) inside the card. */
.fe-content__body .servicesText .img-fluid,
.fe-news-detail__body .servicesText .img-fluid {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Spacing utilities — mt-{0..3} / mb-{0..3}. Match Bootstrap's
   0 / 0.25rem / 0.5rem / 1rem scale. */
.fe-content__body .servicesText .mt-0,
.fe-news-detail__body .servicesText .mt-0 { margin-top: 0 !important; }
.fe-content__body .servicesText .mt-1,
.fe-news-detail__body .servicesText .mt-1 { margin-top: 0.25rem !important; }
.fe-content__body .servicesText .mt-2,
.fe-news-detail__body .servicesText .mt-2 { margin-top: 0.5rem !important; }
.fe-content__body .servicesText .mt-3,
.fe-news-detail__body .servicesText .mt-3 { margin-top: 1rem !important; }
.fe-content__body .servicesText .mb-0,
.fe-news-detail__body .servicesText .mb-0 { margin-bottom: 0 !important; }
.fe-content__body .servicesText .mb-1,
.fe-news-detail__body .servicesText .mb-1 { margin-bottom: 0.25rem !important; }
.fe-content__body .servicesText .mb-2,
.fe-news-detail__body .servicesText .mb-2 { margin-bottom: 0.5rem !important; }
.fe-content__body .servicesText .mb-3,
.fe-news-detail__body .servicesText .mb-3 { margin-bottom: 1rem !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * NEWS DETAIL PAGE
 * ════════════════════════════════════════════════════════════════════════ */
.fe-news-detail {
    padding-bottom: 64px;
}

/* Breadcrumb */
.fe-breadcrumb {
    padding-top: 28px;
    padding-bottom: 16px;
}

.fe-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.85rem;
}

.fe-breadcrumb__item {}

.fe-breadcrumb__link {
    color: var(--fe-breadcrumb-link);
    text-decoration: none;
    transition: color var(--fe-transition);
}

.fe-breadcrumb__link:hover {
    color: var(--fe-primary-hover);
    text-decoration: underline;
}

.fe-breadcrumb__item--sep {
    color: var(--fe-breadcrumb-sep);
    user-select: none;
}

.fe-breadcrumb__item--current {
    color: var(--fe-breadcrumb-current);
    font-weight: 500;
}

/* News header */
.fe-news-detail__header {
    /* No max-width here — the article body below is intentionally narrow
       (860px) for readability, but the header (breadcrumb + type chip +
       title + thumb) reads better at the natural .fe-container width
       (~1200px). Letting the parent container set the cap also keeps the
       header in visual balance with the body when viewed on wide screens. */
    margin: 0 auto;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fe-border-gold);
}

.fe-news-detail__type {
    display: inline-block;
    padding: 4px 14px;
    background-color: var(--fe-gold-400);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--fe-radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.fe-news-detail__title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--fe-text);
    line-height: 1.35;
    margin-bottom: 16px;
}

.fe-news-detail__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    font-size: 0.85rem;
    color: var(--fe-text-muted);
}

.fe-news-detail__date {}

.fe-news-detail__views {}

.fe-news-detail__thumb {
    border-radius: var(--fe-radius-lg);
    overflow: hidden;
    box-shadow: var(--fe-shadow-md);
    margin-top: 8px;
}

.fe-news-detail__thumb-img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
}

.fe-news-detail__tags {
    max-width: 860px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid var(--fe-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.fe-news-detail__tags-label {
    font-size: 0.85rem;
    color: var(--fe-text-muted);
    margin-right: 8px;
    font-weight: 500;
}

/* ── Dark theme adjustments ─────────────────────────────────────────────── */
[data-theme="dark"] .fe-content__body h2,
[data-theme="dark"] .fe-news-detail__body h2 {
    border-left-color: var(--fe-gold-500);
}

[data-theme="dark"] .fe-content__body th,
[data-theme="dark"] .fe-news-detail__body th {
    background-color: rgba(201,169,110,0.15);
    color: var(--fe-warm-200);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fe-content__body,
    .fe-news-detail__body {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .fe-news-detail__meta {
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * CONTENT LIST BY TAG  ( /content/tag/{tag} )
 *
 * Mirrors the visual pattern of the news list (assets/frontend/css/
 * news-frontend.css §LIST PAGE + §CARD + §PAGINATION) but is namespaced
 * under .fe-content-* so the two can evolve independently. Reusing the
 * same class names across both lists would have tightly coupled them and
 * forced every styling change to ripple into the other surface area.
 *
 * Block contract:
 *   .fe-content-list                — outer wrapper
 *   .fe-content-list__topbar        — breadcrumb + page indicator row
 *   .fe-content-list__page-indicator
 *   .fe-content-list__body          — grid container (cards inside)
 *   .fe-content-list__empty         — empty-state placeholder
 *   .fe-content-grid[--4]           — responsive grid (1→2→3→4 cols)
 *   .fe-content-card                — card link
 *   .fe-content-card__thumb / __img / __body / __title
 *   .fe-content-pagination          — pager (prev / page-list / next)
 *   .fe-content-pagination__list / __item / __page / __btn
 * ════════════════════════════════════════════════════════════════════════ */

/* ── List page top bar ──────────────────────────────────────────────────── */
.fe-content-list__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-top: 28px;
}

.fe-content-list__topbar .fe-breadcrumb { padding: 0; }

.fe-content-list__page-indicator {
    color: var(--fe-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.fe-content-list__body {
    background-color: var(--fe-bg-section);
    padding: 24px;
    border-radius: var(--fe-radius-lg);
    margin-bottom: 28px;
}

.fe-content-list__empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--fe-text-muted);
    font-size: 1rem;
}

/* ── Grid (responsive 1 → 2 → 3 → 4 columns) ────────────────────────────── */
.fe-content-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width:  600px) { .fe-content-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:  900px) { .fe-content-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .fe-content-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Card (thumb top + title bottom; natural aspect ratio) ──────────────── */
.fe-content-card {
    display: flex;
    flex-direction: column;
    background-color: var(--fe-bg-card);
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--fe-text);
    transition:
        transform var(--fe-transition-med),
        box-shadow var(--fe-transition-med),
        border-color var(--fe-transition-med);
}

.fe-content-card:hover,
.fe-content-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--fe-shadow-md);
    border-color: var(--fe-border-gold);
    outline: none;
}
.fe-content-card:focus-visible {
    box-shadow: 0 0 0 3px var(--fe-primary);
}

.fe-content-card__thumb {
    position: relative;
    width: 100%;
    background-color: var(--fe-bg-alt);
    overflow: hidden;
    line-height: 0;
}
.fe-content-card__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--fe-transition-slow);
}
.fe-content-card:hover .fe-content-card__img { transform: scale(1.04); }

.fe-content-card__img--placeholder {
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg,
            var(--fe-gold-100) 0%,
            var(--fe-warm-200) 100%);
}

.fe-content-card__body {
    padding: 14px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fe-content-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--fe-text);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.fe-content-card:hover  .fe-content-card__title,
.fe-content-card:focus-visible .fe-content-card__title {
    color: var(--fe-primary-dark);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.fe-content-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 48px;
}

.fe-content-pagination__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fe-content-pagination__item { display: inline-flex; }
.fe-content-pagination__item--gap {
    padding: 0 6px;
    color: var(--fe-text-muted);
    user-select: none;
}

.fe-content-pagination__page,
.fe-content-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    background-color: var(--fe-bg-card);
    color: var(--fe-text);
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        background-color var(--fe-transition),
        border-color var(--fe-transition),
        color var(--fe-transition);
}

.fe-content-pagination__page:hover,
.fe-content-pagination__page:focus-visible,
.fe-content-pagination__btn:not(.fe-content-pagination__btn--disabled):hover,
.fe-content-pagination__btn:not(.fe-content-pagination__btn--disabled):focus-visible {
    background-color: var(--fe-bg-alt);
    border-color: var(--fe-primary);
    color: var(--fe-primary-dark);
    outline: none;
}

.fe-content-pagination__page--active {
    background-color: var(--fe-primary);
    color: var(--fe-text-on-gold);
    border-color: var(--fe-primary);
    cursor: default;
}
.fe-content-pagination__page--active:hover,
.fe-content-pagination__page--active:focus-visible {
    background-color: var(--fe-primary);
    color: var(--fe-text-on-gold);
    border-color: var(--fe-primary);
}

.fe-content-pagination__btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Breadcrumb tweak inside the list page — matches news-list behaviour */
.fe-content-list .fe-breadcrumb {
    padding-top: 0;
    padding-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE EMBEDS (YouTube / Vimeo / etc.)
 *
 * Two strategies layered together so editor-pasted HTML works regardless of
 * how it was authored:
 *
 *   1) `.ratio` + `.ratio-16x9` (Bootstrap 5 spelling) — wrapper-based
 *      aspect-ratio box. Used by content/news editors who paste markup
 *      copied from the legacy template. Works without loading Bootstrap.
 *
 *   2) Bare `<iframe>` inside the body — auto-detect YouTube / Vimeo /
 *      Google Maps / Facebook by `src` attribute and force a 16:9 box
 *      using the modern `aspect-ratio` property. Catches editors who
 *      paste a raw `<iframe>` without any wrapper.
 *
 * Scope: applied universally to .fe-content__body (content pages) and
 * .fe-news-detail__body / .fe-news__body (news pages) plus the .fe-main
 * surface so anything in the rendered body benefits.
 * ════════════════════════════════════════════════════════════════════════ */

/* Wrapper-based (Bootstrap-compatible `.ratio.ratio-16x9`) */
.fe-main .ratio,
.fe-main .fe-embed {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.fe-main .ratio::before,
.fe-main .fe-embed::before {
    content: "";
    display: block;
    padding-top: 56.25%;     /* 16:9 default */
}
.fe-main .ratio-16x9::before { padding-top: 56.25%; }
.fe-main .ratio-4x3::before  { padding-top: 75%;    }
.fe-main .ratio-1x1::before  { padding-top: 100%;   }
.fe-main .ratio-21x9::before { padding-top: 42.857%;}

.fe-main .ratio > iframe,
.fe-main .ratio > video,
.fe-main .ratio > embed,
.fe-main .ratio > object,
.fe-main .fe-embed > iframe,
.fe-main .fe-embed > video,
.fe-main .fe-embed > embed,
.fe-main .fe-embed > object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%  !important;
    height: 100% !important;
    border: 0;
}

/* Bare-iframe auto-responsive (catches editors who pasted just an <iframe>).
   Matches all common video-embed providers + the kinrehab caii-carousel
   iframes that already use inline width="..." style="...". Wrap with
   `aspect-ratio` so the iframe scales smoothly without needing a manual
   wrapper. Restricted to bodies so we don't accidentally affect chrome
   iframes (analytics noscript, etc.). */
.fe-content__body iframe[src*="youtube.com"],
.fe-content__body iframe[src*="youtube-nocookie.com"],
.fe-content__body iframe[src*="youtu.be"],
.fe-content__body iframe[src*="vimeo.com"],
.fe-content__body iframe[src*="player.vimeo.com"],
.fe-content__body iframe[src*="facebook.com/plugins"],
.fe-content__body iframe[src*="google.com/maps"],
.fe-news-detail__body iframe[src*="youtube.com"],
.fe-news-detail__body iframe[src*="youtube-nocookie.com"],
.fe-news-detail__body iframe[src*="youtu.be"],
.fe-news-detail__body iframe[src*="vimeo.com"],
.fe-news-detail__body iframe[src*="player.vimeo.com"],
.fe-news-detail__body iframe[src*="facebook.com/plugins"],
.fe-news-detail__body iframe[src*="google.com/maps"],
.fe-news__body iframe[src*="youtube.com"],
.fe-news__body iframe[src*="youtube-nocookie.com"],
.fe-news__body iframe[src*="youtu.be"],
.fe-news__body iframe[src*="vimeo.com"],
.fe-news__body iframe[src*="player.vimeo.com"],
.fe-news__body iframe[src*="facebook.com/plugins"],
.fe-news__body iframe[src*="google.com/maps"] {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    margin: 1em auto;
}