/* Guides and inspirations — editorial experience (2026). */

.listing-modern--blog,
.blog-article {
    --blog-ink: #0a2232;
    --blog-ink-soft: #5d7280;
    --blog-teal: #0b8279;
    --blog-mint: #19b992;
    --blog-sun: #f59e0b;
    --blog-line: rgba(10, 72, 80, .12);
    --blog-shadow-sm: 0 16px 42px rgba(13, 61, 69, .07);
    --blog-shadow-md: 0 28px 70px rgba(9, 57, 66, .13);
    color: var(--blog-ink);
}

.listing-modern--blog :where(a, button, input, summary):focus-visible,
.blog-article :where(a, button, input, summary):focus-visible {
    outline: 3px solid rgba(20, 184, 166, .48);
    outline-offset: 4px;
}

.listing-modern--blog .blog-hero,
.blog-article-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 8% 10%, rgba(20, 184, 166, .2), transparent 26rem),
        radial-gradient(circle at 92% 18%, rgba(245, 158, 11, .15), transparent 23rem),
        linear-gradient(145deg, #f3fbfa, #fffdf8 55%, #edf9f6);
}

.listing-modern--blog .blog-hero::before,
.blog-article-hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .3;
    background-image: radial-gradient(circle at 2px 2px, rgba(6, 95, 91, .19) 1px, transparent 1.3px);
    background-size: 29px 29px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.blog-hero__orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.blog-hero__orb--one { top: -13rem; left: -10rem; width: 28rem; height: 28rem; border: 5rem solid rgba(20, 184, 166, .075); }
.blog-hero__orb--two { right: -9rem; bottom: -14rem; width: 28rem; height: 28rem; border: 6rem solid rgba(245, 158, 11, .065); }

.listing-modern--blog .blog-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .68fr); align-items: center; gap: clamp(2.2rem, 6vw, 6rem); padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4.2rem, 9vw, 7.2rem); }
.listing-modern--blog .blog-hero--compact .blog-hero__inner { display: block; min-height: 27rem; padding-block: clamp(3.5rem, 8vw, 6rem); }
.listing-modern--blog .blog-hero--compact .blog-hero__copy { max-width: 60rem; }

.blog-breadcrumb {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.35rem;
    padding: .5rem .8rem;
    border: 1px solid rgba(11, 130, 121, .14);
    border-radius: 999px;
    color: var(--blog-ink-soft);
    background: rgba(255, 255, 255, .7);
    font-size: .74rem;
    font-weight: 750;
    backdrop-filter: blur(12px);
}
.blog-breadcrumb a { color: #076b66; }
.blog-breadcrumb i { flex: 0 0 auto; font-size: .5rem; opacity: .55; }
.blog-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--blog-teal);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.blog-kicker i { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--blog-teal), var(--blog-mint)); box-shadow: 0 8px 20px rgba(11, 130, 121, .2); }

.listing-modern--blog .blog-hero h1 { max-width: 61rem; margin: 1rem 0 1.15rem; color: var(--blog-ink); font-size: clamp(2.8rem, 5.7vw, 5.9rem); font-weight: 950; line-height: .95; letter-spacing: -.068em; text-wrap: balance; }
.listing-modern--blog .blog-hero p { max-width: 49rem; margin: 0; color: var(--blog-ink-soft); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.75; }

.blog-hero__facts { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.9rem; }
.blog-hero__facts > :where(a, span) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; min-height: 3.2rem; padding: .55rem .8rem; border: 1px solid var(--blog-line); border-radius: 1rem; color: var(--blog-ink-soft); background: rgba(255, 255, 255, .72); box-shadow: 0 10px 26px rgba(13, 61, 69, .045); backdrop-filter: blur(12px); }
.blog-hero__facts strong { color: var(--blog-teal); font-size: 1.18rem; }
.blog-hero__facts span span,
.blog-hero__facts a span { font-size: .72rem; font-weight: 750; }

.listing-modern--blog .blog-search--panel {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    gap: .7rem;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--blog-shadow-md), inset 0 1px rgba(255, 255, 255, .9);
    backdrop-filter: blur(20px);
}
.blog-search__icon { display: grid; grid-column: 1; grid-row: 1; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: 1rem; color: #fff; background: linear-gradient(135deg, var(--blog-teal), var(--blog-mint)); font-size: 1rem; box-shadow: 0 11px 24px rgba(11, 130, 121, .2); }
.blog-search__copy { display: grid; grid-column: 2 / -1; grid-row: 1; align-content: center; gap: .15rem; }
.blog-search__copy strong { color: var(--blog-ink); }
.blog-search__copy small { color: var(--blog-ink-soft); }
.listing-modern--blog .blog-search--panel input { grid-column: 1 / 3; grid-row: 2; min-width: 0; min-height: 3.5rem; padding-inline: 1rem; border: 1px solid var(--blog-line); border-radius: 1rem; color: var(--blog-ink); background: #f5faf9; }
.listing-modern--blog .blog-search--panel input:focus { border-color: rgba(11, 130, 121, .42); background: #fff; box-shadow: 0 0 0 4px rgba(20, 184, 166, .1); }
.listing-modern--blog .blog-search--panel .btn { grid-column: 3; grid-row: 2; min-height: 3.5rem; gap: .55rem; padding-inline: 1.2rem; border-radius: 1rem; }

.listing-modern--blog .blog-featured { padding: clamp(3.8rem, 8vw, 6.5rem) 0 1rem; background: #fbfdfd; scroll-margin-top: 2rem; }
.blog-featured__head { margin-bottom: 1.5rem; }
.blog-featured__head h2 { color: var(--blog-ink); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -.052em; }
.listing-modern--blog .blog-list-section { padding-block: clamp(3rem, 7vw, 5.8rem); background: radial-gradient(circle at 100% 5%, rgba(245, 158, 11, .055), transparent 24rem), #fbfdfd; }
.listing-modern--blog .blog-featured__grid,
.listing-modern--blog .blog-grid { gap: 1.25rem; }

.listing-modern--blog .blog-card { border-radius: 1.65rem; box-shadow: var(--blog-shadow-sm); }
.listing-modern--blog .blog-card__media { position: relative; aspect-ratio: 16 / 10.5; }
.listing-modern--blog .blog-card__media::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(7, 39, 46, .22)); pointer-events: none; }
.listing-modern--blog .blog-card__body { gap: .85rem; padding: 1.3rem; }
.listing-modern--blog .blog-card__meta { gap: .45rem; }
.listing-modern--blog .blog-card__meta > :where(a, span) { padding: .35rem .55rem; border-radius: 999px; color: #536c78; background: #f1f7f6; font-size: .68rem; }
.listing-modern--blog .blog-card__meta a { color: var(--blog-teal); background: #e9faf6; }
.listing-modern--blog .blog-card h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.listing-modern--blog .blog-card__body > p { font-size: .88rem; }
.listing-modern--blog .blog-card__destination { justify-self: start; padding: .38rem .65rem; border: 1px solid rgba(245, 158, 11, .14); color: #a95b08; background: #fff8e8; }
.listing-modern--blog .blog-card__read { justify-content: space-between; width: 100%; min-height: 2.9rem; margin-top: auto; padding: .65rem .8rem; border-radius: .9rem; color: var(--blog-ink); background: #f3f9f8; }
.listing-modern--blog .blog-card__read i { color: var(--blog-teal); transition: transform .2s ease; }

.listing-modern--blog .blog-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 1.4rem; }
.listing-modern--blog .blog-sidebar { gap: .8rem; top: 1rem; }
.listing-modern--blog .blog-sidebox { padding: 1.15rem; border: 1px solid var(--blog-line); border-radius: 1.25rem; background: #fff; box-shadow: var(--blog-shadow-sm); }
.listing-modern--blog .blog-sidebox h2,
.blog-article .blog-sidebox h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: var(--blog-ink); font-size: .92rem; }
.listing-modern--blog .blog-sidebox h2 i,
.blog-article .blog-sidebox h2 i { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .7rem; color: var(--blog-teal); background: #e9faf6; font-size: .78rem; }
.listing-modern--blog .blog-link-list,
.blog-article .blog-link-list { gap: .45rem; }
.listing-modern--blog .blog-link-list a,
.blog-article .blog-link-list a { display: block; padding: .62rem .7rem; border-radius: .8rem; color: #425c68; background: #f7faf9; font-size: .8rem; line-height: 1.45; }
.listing-modern--blog .blog-chip-list a,
.listing-modern--blog .blog-tag-list a,
.blog-article .blog-chip-list a,
.blog-article .blog-tag-list a { border: 1px solid rgba(11, 130, 121, .08); color: var(--blog-teal); background: #f0faf7; }

.listing-modern--blog .blog-cta,
.blog-article .blog-cta { position: relative; overflow: hidden; padding: clamp(1.35rem, 3vw, 2rem); border: 0; border-radius: 1.7rem; color: #fff; background: linear-gradient(135deg, #073d48, #0b8279 65%, #19b992); box-shadow: 0 24px 58px rgba(8, 75, 76, .18); }
.listing-modern--blog .blog-cta::after,
.blog-article .blog-cta::after { content: ""; position: absolute; right: -5rem; top: -6rem; width: 14rem; height: 14rem; border: 2.5rem solid rgba(255, 255, 255, .06); border-radius: 50%; pointer-events: none; }
.listing-modern--blog .blog-cta > *,
.blog-article .blog-cta > * { position: relative; z-index: 1; }
.listing-modern--blog .blog-cta h2,
.blog-article .blog-cta h2 { color: #fff; }
.listing-modern--blog .blog-cta p,
.blog-article .blog-cta p { color: rgba(255, 255, 255, .75); }
.listing-modern--blog .blog-cta .section-heading__eyebrow,
.blog-article .blog-cta .section-heading__eyebrow { color: #99f6e4; }
.listing-modern--blog .blog-cta .btn--primary,
.blog-article .blog-cta .btn--primary { color: #073d48; background: #fff; }
.listing-modern--blog .blog-cta .btn--ghost,
.blog-article .blog-cta .btn--ghost { border-color: rgba(255, 255, 255, .22); color: #fff; background: rgba(255, 255, 255, .08); }

/* Blog article pages share the same polished editorial language. */

.blog-article .blog-article-hero__grid { gap: clamp(2rem, 5vw, 5rem); padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 6.5rem); }
.blog-article .blog-article-hero__copy h1 { color: var(--blog-ink); font-size: clamp(2.6rem, 5vw, 5.3rem); font-weight: 950; line-height: .96; letter-spacing: -.065em; text-wrap: balance; }
.blog-article .blog-article-hero__copy p { color: var(--blog-ink-soft); }
.blog-article .blog-article-hero__media { overflow: hidden; border: .45rem solid rgba(255, 255, 255, .72); border-radius: 2rem; box-shadow: var(--blog-shadow-md); transform: rotate(1.2deg); }
.blog-article .breadcrumb-line { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; color: var(--blog-ink-soft); font-size: .76rem; }
.blog-article .breadcrumb-line a { color: var(--blog-teal); }
.blog-article .blog-article-hero__meta span { padding: .38rem .6rem; border: 1px solid var(--blog-line); border-radius: 999px; background: rgba(255, 255, 255, .7); }
.blog-article .blog-share a { border: 1px solid var(--blog-line); color: var(--blog-teal); background: rgba(255, 255, 255, .78); }
.blog-article .blog-article-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 2rem; }
.blog-article .blog-article-content { padding: clamp(1.3rem, 3.5vw, 2.6rem); border: 1px solid var(--blog-line); border-radius: 1.8rem; background: #fff; box-shadow: var(--blog-shadow-sm); }
.blog-article .blog-article-content h2,
.blog-article .blog-article-content h3 { color: var(--blog-ink); letter-spacing: -.035em; }
.blog-article .blog-sidebar { top: 1rem; }
.blog-article .blog-sidebox { border-radius: 1.25rem; box-shadow: var(--blog-shadow-sm); }
.blog-article .blog-article-links a { border: 1px solid rgba(11, 130, 121, .1); border-radius: 999px; color: var(--blog-teal); background: #f0faf7; }

.blog-guide-faq {
    display: grid;
    gap: 1rem;
    margin: clamp(2.4rem, 6vw, 4.5rem) 0;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--blog-line);
    border-radius: 1.65rem;
    background: linear-gradient(145deg, #f1fbf8, #fffaf0);
}
.blog-guide-faq > h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.blog-guide-faq__list { display: grid; gap: .7rem; }
.blog-guide-faq__item { border: 1px solid rgba(11, 130, 121, .12); border-radius: 1rem; background: rgba(255, 255, 255, .86); }
.blog-guide-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; color: var(--blog-ink); font-weight: 850; line-height: 1.45; cursor: pointer; list-style: none; }
.blog-guide-faq__item summary::-webkit-details-marker { display: none; }
.blog-guide-faq__item summary i { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--blog-teal); background: #e5f8f3; transition: rotate .2s ease; }
.blog-guide-faq__item[open] summary i { rotate: 45deg; }
.blog-guide-faq__item p { margin: 0; padding: 0 1rem 1rem; color: var(--blog-ink-soft); line-height: 1.7; }

@media (hover: hover) and (pointer: fine) {
    .listing-modern--blog .blog-card:hover { border-color: rgba(11, 130, 121, .24); box-shadow: var(--blog-shadow-md); transform: translateY(-7px); }
    .listing-modern--blog .blog-card:hover .blog-card__read i { transform: translateX(.25rem); }
    .listing-modern--blog .blog-link-list a:hover,
    .blog-article .blog-link-list a:hover { color: var(--blog-teal); background: #e9faf6; }
    .listing-modern--blog .blog-search--panel .btn:hover { transform: translateY(-2px); }
}

html[dir="rtl"] .blog-breadcrumb i { transform: rotate(180deg); }
html[dir="rtl"] .listing-modern--blog .blog-card:hover .blog-card__read i { transform: translateX(-.25rem) rotate(180deg); }
html[dir="rtl"] .listing-modern--blog .blog-card__read i { transform: rotate(180deg); }
html[dir="rtl"] .listing-modern--blog .blog-cta::after,
html[dir="rtl"] .blog-article .blog-cta::after { right: auto; left: -5rem; }

@media (max-width: 1080px) {
    .listing-modern--blog .blog-hero__inner,
    .blog-article .blog-article-hero__grid { grid-template-columns: 1fr; }
    .listing-modern--blog .blog-search--panel { width: min(100%, 45rem); }
    .listing-modern--blog .blog-layout,
    .blog-article .blog-article-layout { grid-template-columns: 1fr; }
    .listing-modern--blog .blog-sidebar,
    .blog-article .blog-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-article .blog-article-hero__media { width: min(100%, 48rem); transform: none; }
}

@media (max-width: 720px) {
    .listing-modern--blog .blog-hero__inner { padding: 2.7rem 0 4.2rem; }
    .listing-modern--blog .blog-hero h1,
    .blog-article .blog-article-hero__copy h1 { font-size: clamp(2.25rem, 11vw, 3.4rem); overflow-wrap: anywhere; text-wrap: wrap; }
    .listing-modern--blog .container,
    .blog-article .container { max-width: calc(100vw - 1.5rem); min-width: 0; }
    .blog-hero__facts { display: grid; grid-template-columns: 1fr 1fr; }
    .blog-hero__facts > :where(a, span):last-child { grid-column: 1 / -1; }
    .listing-modern--blog .blog-search--panel { grid-template-columns: 3rem minmax(0, 1fr); padding: 1rem; border-radius: 1.45rem; }
    .blog-search__copy { grid-column: 2; }
    .listing-modern--blog .blog-search--panel input,
    .listing-modern--blog .blog-search--panel .btn { grid-column: 1 / -1; }
    .listing-modern--blog .blog-search--panel input { grid-row: 2; }
    .listing-modern--blog .blog-search--panel .btn { grid-row: 3; width: 100%; }
    .listing-modern--blog .blog-featured__grid,
    .listing-modern--blog .blog-grid,
    .listing-modern--blog .blog-sidebar,
    .blog-article .blog-sidebar { grid-template-columns: 1fr; }
    .listing-modern--blog .blog-card { border-radius: 1.4rem; }
    .listing-modern--blog .blog-cta,
    .blog-article .blog-cta { grid-template-columns: 1fr; border-radius: 1.45rem; }
    .blog-article .blog-article-content { padding: 1.2rem; border-radius: 1.4rem; }
    .blog-guide-faq { padding: 1rem; border-radius: 1.25rem; }
    .blog-guide-faq__item summary { align-items: flex-start; }
}

@media (max-width: 390px) {
    .listing-modern--blog .container,
    .blog-article .container { max-width: calc(100vw - 1rem); }
    .blog-hero__facts { grid-template-columns: 1fr; }
    .blog-hero__facts > :where(a, span):last-child { grid-column: auto; }
    .blog-kicker { font-size: .68rem; letter-spacing: .075em; }
}

@media (prefers-reduced-motion: reduce) {
    .listing-modern--blog *,
    .listing-modern--blog *::before,
    .listing-modern--blog *::after,
    .blog-article *,
    .blog-article *::before,
    .blog-article *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
    .listing-modern--blog :where(a, button, input):focus-visible,
    .blog-article :where(a, button, input):focus-visible { outline: 3px solid Highlight; }
    .listing-modern--blog .blog-card,
    .listing-modern--blog .blog-search--panel,
    .listing-modern--blog .blog-sidebox,
    .blog-article .blog-article-content { border: 1px solid CanvasText; }
}