/* Horeka Quick OS — site-wide Discovery end-cap (includes/discovery-endcap.php).
   Desktop rules are a copy of the homepage's `.hqd-shell .hqd-disc*` block in
   quick-desktop.css, re-scoped to `.hq-endcap-d`. Mobile uses quick.css's
   unscoped `.hqm-disc*` rules as-is. Keep the two copies in step when editing. */

.hq-endcap-d { display: none; }
.hq-endcap-m { display: block; }
.hq-endcap { clear: both; }

@media (min-width: 1024px) {
    .hq-endcap-d { display: block; overflow-x: clip; }
    .hq-endcap-m { display: none; }
}

.hq-endcap-d .hqd-discovery-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    background: #fefcf8;
    border-radius: 0;
    border: none;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    /* Reserved for worst-case content: 3-line heading + 2-line subheading
       + tagline + 4 feature blocks + 2 stacked CTAs + section padding.    */
    min-height: 640px;
}

/* ── Left column: illustration pinned to bottom ──────────────────────────── */
.hq-endcap-d .hqd-disc-illus-col {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
}
.hq-endcap-d .hqd-disc-illus-img {
    position: absolute;
    bottom: -20px;
    left: 32px;
    width: 75%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    opacity: 0.38;
}

/* ── Right column: content ───────────────────────────────────────────────── */
.hq-endcap-d .hqd-disc-content-col {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 64px 52px 32px;
    position: relative;
    z-index: 1;
}

/* ── Scroll-reveal animations ────────────────────────────────────────────── */
@keyframes hqd-disc-slide-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hqd-disc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hq-endcap-d .hqd-disc-anim { opacity: 0; will-change: opacity; }
.hq-endcap-d .hqd-disc-anim.hqd-disc-visible[data-anim="slide-up"] {
    animation: hqd-disc-slide-up 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hq-endcap-d .hqd-disc-anim.hqd-disc-visible[data-anim="fade"] {
    animation: hqd-disc-fade 0.55s ease both;
}

/* ── Heading rotation: JS drives opacity inline; no CSS class rules needed ── */

/* ── Text ────────────────────────────────────────────────────────────────── */
/* Reserved-space strategy:
   Previously, min-height was applied to each individual line (heading +
   subheading). On short rotations that left a visible gap *between* the
   heading text and the subheading text. The fix is to reserve the worst-case
   space on the WRAPPER instead — short content stays flush together and the
   leftover space collapses below the tagline. Flexbox + flex-end pins the
   text block to the bottom of the reserved area so it always sits at the
   same baseline regardless of rotation length (no vertical jitter on the
   stuff below). */
.hq-endcap-d .hqd-disc-hdr-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Worst case is the 3-line headline ("We'd rather show you 20 useful
       products than 2 lakh irrelevant ones.") + 2-line subheading + 1-line
       tagline + their margins. Scaled with the viewport so it matches the
       heading's clamp(40px, 4.2vw, 62px). */
    min-height: clamp(230px, 22vw, 320px);
}

/* Right-aligned heading — natural height, no individual reservation. */
.hq-endcap-d .hqd-disc-heading {
    font-size: clamp(40px, 4.2vw, 62px);
    font-weight: 900;
    color: #0d1b40;
    line-height: 1.08;
    margin: 0 0 10px;
    letter-spacing: -1.5px;
    font-family: 'Outfit', 'Inter', sans-serif;
    text-align: right;
}

/* Sub-heading — natural height; sits flush below heading. */
.hq-endcap-d .hqd-disc-subheading {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    margin: 0 0 10px;
    line-height: 1.55;
    text-align: right;
}

/* Tagline — right-aligned, gray */
.hq-endcap-d .hqd-disc-tagline {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    text-decoration: none;
}
.hq-endcap-d .hqd-disc-tagline svg { display: none; }

/* ── Feature row with vertical separators ────────────────────────────────── */
.hq-endcap-d .hqd-disc-features {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    margin: 32px 0;
    border-top: 1px solid #e2d9cc;
    border-bottom: 1px solid #e2d9cc;
    padding: 20px 0;
}
.hq-endcap-d .hqd-disc-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 0 20px 0 4px;
    border-right: 1px solid #ddd5c8;
}
.hq-endcap-d .hqd-disc-feat:first-child { padding-left: 0; }
.hq-endcap-d .hqd-disc-feat:last-child  { border-right: none; padding-right: 0; }
.hq-endcap-d .hqd-disc-feat-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hq-endcap-d .hqd-disc-feat-body { display: flex; flex-direction: column; }
.hq-endcap-d .hqd-disc-feat-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}
.hq-endcap-d .hqd-disc-feat-desc { display: none; }

/* ── CTA buttons — stacked, right-aligned ────────────────────────────────── */
.hq-endcap-d .hqd-disc-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}
.hq-endcap-d .hqd-disc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    white-space: nowrap;
    width: 260px;
}
.hq-endcap-d .hqd-disc-btn:hover { opacity: 0.88; transform: translateY(-2px); }
.hq-endcap-d .hqd-disc-btn-primary {
    background: #0d1b40;
    color: #fff;
    border: 2px solid #0d1b40;
}
.hq-endcap-d .hqd-disc-btn-outline {
    background: transparent;
    color: #0d1b40;
    border: 2px solid #0d1b40;
}

.hq-endcap-preview {
    margin: 0;
    padding: 6px 12px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    color: #78350f;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}