/* ============================================================
   Landing Heading Styles — PREMIUM REDESIGN
   ------------------------------------------------------------
   Reusable heading style presets for landing pages.

   Selected style comes from Landing Theme Settings
   (landing_theme_settings.heading_style) and is rendered by the
   templates as:  <h2 class="landing-section-title heading-style-N">

   The decorative structure required by each design is injected at
   runtime by public/assets/js/landing-heading-decorate.js, which
   wraps the existing dynamic title into a .lht-text span and adds
   aria-hidden ornament spans around it. Without JavaScript the
   heading simply degrades to a plain bold title — nothing breaks.

   Style mapping (old values keep working via aliases):
     style_1 / legacy style_3 / legacy style_5 -> Floating Gold Line
     style_2 / legacy style_4                  -> Luxury Ribbon

   Fully responsive; long Bengali / English / emoji titles wrap
   safely instead of overflowing.
   ============================================================ */

/* --- Base: shared by all heading styles (fallback = plain title) --- */
.landing-section-title {
    display: inline-block;
}

/* ============================================================
   DESIGN — FLOATING GOLD LINE  (Minimal Luxury)
   Adapted from static reference "Design 03"
   ============================================================ */
.landing-section-title.lht-design-line {
    --lht-gold: #b88a2f;
    --lht-gold-light: #dfbd69;
    --lht-ink: #173b3d;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Short gold side accents, mirroring each other
   (::before = left, ::after = right).
   Compact adaptations of the reference Design 03 side lines —
   identical gradients, fixed short width, so no long line runs
   into or away from the dynamic title. Each side reads:
   [accent line][diamond][gold bar] — mirrored on the right. */
.landing-section-title.lht-design-line::before,
.landing-section-title.lht-design-line::after {
    content: "";
    flex: 0 0 56px;
    height: 1px;
}
.landing-section-title.lht-design-line::before {
    background: linear-gradient(90deg, transparent, var(--lht-gold-light) 30%, var(--lht-gold) 100%);
}
.landing-section-title.lht-design-line::after {
    background: linear-gradient(90deg, var(--lht-gold) 0%, var(--lht-gold-light) 70%, transparent);
}

/* Gold diamond ornaments at the outer ends */
.landing-section-title.lht-design-line .lht-orn {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1px solid var(--lht-gold);
    background: #fff;
    transform: rotate(45deg);
}
.landing-section-title.lht-design-line .lht-orn--l { margin-right: 8px; }
.landing-section-title.lht-design-line .lht-orn--r { margin-left: 8px; }

/* Small vertical gold bars next to the title */
.landing-section-title.lht-design-line .lht-bar {
    width: 14px;
    height: 3px;
    flex: 0 0 14px;
    background: var(--lht-gold);
}
.landing-section-title.lht-design-line .lht-bar--l { margin-right: 10px; }
.landing-section-title.lht-design-line .lht-bar--r { margin-left: 10px; }

/* Title core: diamond above + short underline below */
.landing-section-title.lht-design-line .lht-core {
    position: relative;
    flex: 0 1 auto;
    padding: 0 24px;
    text-align: center;
}
.landing-section-title.lht-design-line .lht-core::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    left: 50%;
    top: -11px;
    transform: translateX(-50%) rotate(45deg);
    border: 1px solid var(--lht-gold);
    background: #fff;
}
.landing-section-title.lht-design-line .lht-core::after {
    content: "";
    position: absolute;
    width: 52px;
    height: 1px;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    background: var(--lht-gold);
}

/* Faint secondary line under the title */
.landing-section-title.lht-design-line .lht-secondary {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -13px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 138, 47, .35) 25%,
        rgba(184, 138, 47, .35) 75%,
        transparent 100%);
}

/* Dynamic title text */
.landing-section-title.lht-design-line .lht-text {
    display: block;
    color: var(--lht-ink);
    -webkit-text-fill-color: var(--lht-ink);
    font-size: clamp(18px, 2.5vw, 34px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 600px) {
    .landing-section-title.lht-design-line {
        padding: 20px 8px;
    }
    .landing-section-title.lht-design-line .lht-core {
        padding: 0 12px;
    }
    .landing-section-title.lht-design-line .lht-text {
        font-size: clamp(14px, 4vw, 22px);
        letter-spacing: .04em;
    }
    .landing-section-title.lht-design-line .lht-bar {
        width: 8px;
        flex-basis: 8px;
    }
    .landing-section-title.lht-design-line .lht-bar--l { margin-right: 6px; }
    .landing-section-title.lht-design-line .lht-bar--r { margin-left: 6px; }
    .landing-section-title.lht-design-line .lht-orn {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }
    .landing-section-title.lht-design-line::before,
    .landing-section-title.lht-design-line::after {
        flex-basis: 28px;
    }
}

/* ============================================================
   DESIGN — LUXURY RIBBON  (Open-Corner Style)
   Adapted from static reference "Design 04"
   ============================================================ */
.landing-section-title.lht-design-ribbon {
    --lht-gold: #bd8b2f;
    --lht-gold-light: #e4c16b;
    --lht-teal: #0a4143;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 22px 14px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Side gradient lines (::before = left, ::after = right) */
.landing-section-title.lht-design-ribbon::before,
.landing-section-title.lht-design-ribbon::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 16px;
}
.landing-section-title.lht-design-ribbon::before {
    background: linear-gradient(90deg, transparent, var(--lht-gold-light) 35%, var(--lht-gold));
}
.landing-section-title.lht-design-ribbon::after {
    background: linear-gradient(90deg, var(--lht-gold), var(--lht-gold-light) 65%, transparent);
}

/* Main ribbon box */
.landing-section-title.lht-design-ribbon .lht-box {
    position: relative;
    flex: 0 1 auto;
    max-width: 78%;
    padding: 13px 50px;
    background: var(--lht-teal);
    text-align: center;
    box-sizing: border-box;
    isolation: isolate;
}

/* Gold top/bottom rails inside the ribbon */
.landing-section-title.lht-design-ribbon .lht-box::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: 5px;
    bottom: 5px;
    border-top: 1px solid var(--lht-gold-light);
    border-bottom: 1px solid var(--lht-gold-light);
    pointer-events: none;
}

/* Subtle center glow on the ribbon */
.landing-section-title.lht-design-ribbon .lht-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .045), transparent);
    pointer-events: none;
}

/* Angled ribbon tails behind the box */
.landing-section-title.lht-design-ribbon .lht-tail {
    position: absolute;
    top: 50%;
    width: 18px;
    height: calc(100% - 8px);
    background: var(--lht-teal);
    border-top: 1px solid var(--lht-gold);
    border-bottom: 1px solid var(--lht-gold);
    transform: translateY(-50%);
    z-index: -1;
}
.landing-section-title.lht-design-ribbon .lht-tail--left {
    left: -10px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    border-left: 1px solid var(--lht-gold);
}
.landing-section-title.lht-design-ribbon .lht-tail--right {
    right: -10px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    border-right: 1px solid var(--lht-gold);
}

/* Small gold corner cuts on the ribbon */
.landing-section-title.lht-design-ribbon .lht-corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--lht-gold-light);
    background: var(--lht-teal);
    transform: rotate(45deg);
    z-index: 3;
}
.landing-section-title.lht-design-ribbon .lht-corner--left {
    left: 5px;
    top: 50%;
    margin-top: -4px;
}
.landing-section-title.lht-design-ribbon .lht-corner--right {
    right: 5px;
    top: 50%;
    margin-top: -4px;
}

/* Dynamic title text */
.landing-section-title.lht-design-ribbon .lht-text {
    position: relative;
    z-index: 4;
    display: block;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: clamp(17px, 2.4vw, 33px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 600px) {
    .landing-section-title.lht-design-ribbon {
        padding: 18px 7px;
    }
    .landing-section-title.lht-design-ribbon .lht-box {
        max-width: 82%;
        padding: 10px 30px;
    }
    .landing-section-title.lht-design-ribbon .lht-text {
        font-size: clamp(13px, 4vw, 21px);
        letter-spacing: .035em;
    }
    .landing-section-title.lht-design-ribbon .lht-tail {
        width: 13px;
    }
    .landing-section-title.lht-design-ribbon .lht-corner {
        width: 6px;
        height: 6px;
    }
}

/* ============================================================
   DESIGN — LUXURY ARCH  (Open Arch + Center Medallion)
   Adapted from static reference "Design 05"
   ============================================================ */
.landing-section-title.lht-design-arch {
    --lht-arch-gold: #b98a32;
    --lht-arch-gold-soft: #d9b55e;
    --lht-arch-text: #123f41;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.landing-section-title.lht-design-arch .lht-arch-inner {
    position: relative;
    width: min(100%, 1050px);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 74px;
}

/* Open arch behind the title */
.landing-section-title.lht-design-arch .lht-arch-shape {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(68%, 650px);
    height: 54px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--lht-arch-gold);
    border-bottom: 0;
    border-radius: 120px 120px 0 0;
    pointer-events: none;
}
.landing-section-title.lht-design-arch .lht-arch-shape::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 9px;
    height: 9px;
    background: #fff;
    border: 1px solid var(--lht-arch-gold);
    transform: translateX(-50%) rotate(45deg);
}

/* Side horizontal extensions */
.landing-section-title.lht-design-arch .lht-ext {
    position: absolute;
    top: 50%;
    width: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lht-arch-gold));
}
.landing-section-title.lht-design-arch .lht-ext--left {
    left: 0;
}
.landing-section-title.lht-design-arch .lht-ext--right {
    right: 0;
    transform: scaleX(-1);
}

.landing-section-title.lht-design-arch .lht-ext--left::after {
    right: 0;
}
.landing-section-title.lht-design-arch .lht-ext--right::after {
    left: 0;
}

/* Center title plate */
.landing-section-title.lht-design-arch .lht-plate {
    position: relative;
    z-index: 5;
    min-width: 180px;
    max-width: 72%;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--lht-arch-gold);
    text-align: center;
    box-sizing: border-box;
    box-shadow:
        0 7px 20px rgba(18, 63, 65, .07),
        inset 0 -3px 0 rgba(185, 138, 50, .08);
}
.landing-section-title.lht-design-arch .lht-plate::before,
.landing-section-title.lht-design-arch .lht-plate::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    background: var(--lht-arch-gold);
}
.landing-section-title.lht-design-arch .lht-plate::before {
    top: -2px;
}
.landing-section-title.lht-design-arch .lht-plate::after {
    bottom: -2px;
}

/* Side notch ornaments */
.landing-section-title.lht-design-arch .lht-notch {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid var(--lht-arch-gold);
    transform: translateY(-50%) rotate(45deg);
    z-index: -1;
}
.landing-section-title.lht-design-arch .lht-notch--left {
    left: -7px;
}
.landing-section-title.lht-design-arch .lht-notch--right {
    right: -7px;
}

/* Dynamic title text */
.landing-section-title.lht-design-arch .lht-text {
    display: block;
    color: var(--lht-arch-text);
    -webkit-text-fill-color: var(--lht-arch-text);
    font-size: clamp(17px, 2.4vw, 32px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Small subtitle-like decorative mark under the title */
.landing-section-title.lht-design-arch .lht-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
}
.landing-section-title.lht-design-arch .lht-mark span {
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid var(--lht-arch-gold);
    transform: rotate(45deg);
}
.landing-section-title.lht-design-arch .lht-mark::before,
.landing-section-title.lht-design-arch .lht-mark::after {
    content: "";
    width: 25px;
    height: 1px;
    background: var(--lht-arch-gold-soft);
}

@media (max-width: 600px) {
    .landing-section-title.lht-design-arch {
        padding: 25px 7px 20px;
    }
    .landing-section-title.lht-design-arch .lht-arch-inner {
        min-height: 68px;
    }
    .landing-section-title.lht-design-arch .lht-arch-shape {
        width: 70%;
        height: 48px;
    }
    .landing-section-title.lht-design-arch .lht-ext {
        width: 15%;
    }
    .landing-section-title.lht-design-arch .lht-plate {
        max-width: 78%;
        padding: 10px 23px 9px;
    }
    .landing-section-title.lht-design-arch .lht-text {
        font-size: clamp(13px, 4vw, 21px);
        letter-spacing: .04em;
    }
    .landing-section-title.lht-design-arch .lht-mark {
        margin-top: 2px;
    }
}

/* ============================================================
   BENGALI SCRIPT FIX
   Bengali glyphs are visually connected; letter-spacing breaks
   conjuncts and matras apart. Applied only when the dynamic
   title actually contains Bengali characters (class added by
   the decorator), so English titles keep their tracking.
   Placed last to win over every design's letter-spacing.
   ============================================================ */
.landing-section-title .lht-text.lht-bn {
    letter-spacing: normal;
}