/* ═══════════════════════════════════════════════════════
   MYTRIPLIO · mytriplio.com
   Playfair Display + DM Sans · Warm editorial aesthetic
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:       #FAF7F2;
  --cream-dark:  #F0EBE1;
  --cream-mid:   #F5F0E8;
  --ink:         #1A1612;
  --ink-mid:     #4A4037;
  --ink-light:   #8B7D6E;
  --terra:       #C4622D;
  --terra-hover: #a84f23;
  --terra-light: #F0D4C2;
  --terra-pale:  #FDF0E8;
  --sage:        #5B7A5E;
  --sage-light:  #E8F0E9;
  --gold:        #C9973A;
  --gold-hover:  #b08330;
  --gold-light:  #FDF3E1;
  --premium:     #9B7B2E;
  --border:      rgba(26,22,18,0.11);
  --radius:      12px;
  --radius-sm:   7px;
  --shadow:      0 2px 12px rgba(26,22,18,0.08);
  --shadow-lg:   0 12px 40px rgba(26,22,18,0.14);
  --max-w:       1220px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--ink); line-height: 1.72; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { line-height: 1.25; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.inline-form { display: inline; }

/* ══ ADS ══════════════════════════════════════════════ */
.ad-strip { background: var(--cream-dark); border-bottom: 1px solid var(--border); padding: 8px 2rem; text-align: center; min-height: 60px; }
.ad-banner-wrap { background: var(--cream-dark); border-top: 1px solid var(--border); padding: 10px 2rem; text-align: center; min-height: 90px; }
.ad-in-content { background: var(--cream-dark); border-radius: var(--radius-sm); padding: 10px; margin: 2rem auto; text-align: center; min-height: 90px; max-width: 728px; }
.ad-section { text-align: center; background: var(--cream-dark); padding: 1rem 2rem; }
.ad-label { font-size: 0.66rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.sidebar-ad { margin-top: 1.5rem; background: var(--cream-dark); border-radius: var(--radius-sm); padding: 10px; text-align: center; min-height: 260px; }
.article-sidebar-ad { float: right; margin: 0 0 1.5rem 2rem; width: 300px; background: var(--cream-dark); border-radius: var(--radius-sm); padding: 10px; text-align: center; min-height: 250px; }

/* ══ NAVBAR ════════════════════════════════════════════ */
.navbar { background: rgba(250,247,242,0.97); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 7px; }
.brand-icon { font-size: 1.4rem; }
.brand-text { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { font-size: 0.875rem; color: var(--ink-mid); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-premium-link { color: var(--gold) !important; font-weight: 500; }
.star-icon { font-size: 0.75em; vertical-align: middle; }
.btn-nav { background: var(--terra) !important; color: #fff !important; padding: 6px 16px; border-radius: var(--radius-sm); font-weight: 500; transition: background 0.2s; }
.btn-nav:hover { background: var(--terra-hover) !important; }
.btn-ghost { background: none; border: none; cursor: pointer; font: inherit; color: var(--ink-light); font-size: 0.875rem; transition: color 0.2s; padding: 0; }
.btn-ghost:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ink); padding: 4px; }

/* ══ BUTTONS ═══════════════════════════════════════════ */
.btn-primary { display: inline-block; background: var(--terra); color: #fff; padding: 11px 26px; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.92rem; border: none; cursor: pointer; font-family: inherit; transition: background 0.2s, transform 0.1s; }
.btn-primary:hover { background: var(--terra-hover); color: #fff; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.full-width { width: 100%; text-align: center; display: block; }
.btn-outline { display: inline-block; border: 1.5px solid var(--ink); color: var(--ink); padding: 11px 26px; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.92rem; transition: all 0.2s; }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-outline-sm { display: inline-block; border: 1px solid var(--border); color: var(--ink-mid); padding: 5px 13px; border-radius: var(--radius-sm); font-size: 0.8rem; transition: border-color 0.2s; }
.btn-outline-sm:hover { border-color: var(--ink); color: var(--ink); }
.btn-primary-sm { background: var(--terra); color: #fff; border: none; padding: 7px 17px; border-radius: var(--radius-sm); font-size: 0.84rem; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.btn-primary-sm:hover { background: var(--terra-hover); }
.btn-danger-sm { background: none; border: 1px solid #e74c3c; color: #e74c3c; padding: 5px 13px; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn-danger-sm:hover { background: #e74c3c; color: #fff; }
.btn-gold { display: inline-block; background: var(--gold); color: #fff; padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; transition: background 0.2s; border: none; cursor: pointer; font-family: inherit; }
.btn-gold:hover { background: var(--gold-hover); color: #fff; }
.btn-gold.full-width { width: 100%; text-align: center; display: block; padding: 13px; font-size: 0.95rem; }
.btn-ghost-card { display: block; text-align: center; padding: 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--ink-light); font-size: 0.88rem; }

/* ══ HERO ══════════════════════════════════════════════ */
.hero { max-width: var(--max-w); margin: 0 auto; padding: 4.5rem 2rem 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero-eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terra); margin-bottom: 1rem; }
.hero-title { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 4.5vw, 4.2rem); line-height: 1.1; margin-bottom: 1.4rem; }
.hero-title em { color: var(--terra); font-style: italic; }
.hero-sub { font-size: 1.02rem; color: var(--ink-mid); max-width: 430px; margin-bottom: 2rem; line-height: 1.8; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-stats { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-family: 'Playfair Display', serif; font-size: 1.75rem; }
.stat span { font-size: 0.75rem; color: var(--ink-light); }
.stat-divider { width: 1px; height: 36px; background: var(--border); }
.hero-visual { position: relative; height: 420px; }
.hero-card { position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-1 { width: 67%; height: 290px; top: 0; right: 0; }
.hero-card-2 { width: 54%; height: 230px; bottom: 0; left: 0; }
.hero-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(26,22,18,0.65)); color: #fff; font-size: 0.77rem; }

/* ══ PREMIUM STRIP ═════════════════════════════════════ */
.premium-strip { background: var(--gold-light); border-top: 1px solid rgba(201,151,58,0.2); border-bottom: 1px solid rgba(201,151,58,0.2); }
.premium-strip-inner { max-width: var(--max-w); margin: 0 auto; padding: 0.9rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.premium-strip-text { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gold-star { color: var(--gold); font-size: 1.1rem; }
.premium-strip-text strong { font-size: 0.95rem; }
.premium-strip-text span { font-size: 0.88rem; color: var(--ink-mid); }

/* ══ SECTIONS ══════════════════════════════════════════ */
.section { max-width: var(--max-w); margin: 0 auto; padding: 3rem 2rem; }
.section-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.75rem; }
.section-title { font-family: 'Playfair Display', serif; font-size: 1.85rem; }
.section-link { font-size: 0.875rem; color: var(--terra); }
.section-link:hover { text-decoration: underline; }

/* ══ FEATURED GRID ═════════════════════════════════════ */
.featured-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; }
.post-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream-dark); transition: transform 0.25s, box-shadow 0.25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card-hero { grid-row: 1 / 3; }
.post-card-img { height: 220px; background-size: cover; background-position: center; position: relative; }
.post-card-hero .post-card-img { height: 100%; min-height: 360px; }
.post-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,22,18,0.55) 0%, transparent 55%); }
.post-card-body { padding: 1.2rem 1.35rem; }
.post-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.post-card-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--ink); line-height: 1.4; margin-bottom: 0.4rem; }
.post-card-hero .post-card-title { font-size: 1.45rem; }
.post-card-excerpt { font-size: 0.875rem; color: var(--ink-mid); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-light); }
.author-name { font-weight: 500; color: var(--ink-mid); }
.post-stats { display: flex; gap: 0.65rem; }

/* ══ DESTINATIONS ══════════════════════════════════════ */
.destinations-strip { background: var(--terra-pale); padding: 2.5rem 0; }
.destinations-grid { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.dest-chip { display: inline-block; background: var(--cream); border: 1px solid var(--terra-light); color: var(--ink-mid); padding: 7px 17px; border-radius: 99px; font-size: 0.875rem; transition: all 0.18s; }
.dest-chip:hover { background: var(--terra); color: #fff; border-color: var(--terra); }

/* ══ POSTS GRID ════════════════════════════════════════ */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 1.35rem; }
.post-card-sm { display: block; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--border); transition: box-shadow 0.2s, transform 0.2s; }
.post-card-sm:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.post-card-sm-link { display: block; }
.post-card-sm-img { height: 180px; background-size: cover; background-position: center; background-color: var(--cream-dark); }
.post-card-sm-img.no-img { display: flex; align-items: center; justify-content: center; }
.post-card-sm-img.no-img span { font-size: 2.5rem; opacity: 0.25; }
.post-card-sm-body { padding: 1rem 1.25rem 1.1rem; }
.post-card-sm-title { font-family: 'Playfair Display', serif; font-size: 1rem; line-height: 1.45; color: var(--ink); margin: 0.35rem 0 0.5rem; }
.post-excerpt-sm { font-size: 0.82rem; color: var(--ink-mid); margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-sm-footer { display: flex; flex-direction: column; gap: 3px; font-size: 0.76rem; color: var(--ink-light); border-top: 1px solid var(--border); padding-top: 0.7rem; margin-top: 0.6rem; }

/* ══ BADGES ════════════════════════════════════════════ */
.destination-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--terra-pale); color: var(--terra); padding: 3px 10px; border-radius: 99px; font-size: 0.77rem; font-weight: 500; }
.destination-badge-sm { display: inline-block; font-size: 0.74rem; font-weight: 500; color: var(--terra); }

/* ══ BREADCRUMBS ═══════════════════════════════════════ */
.breadcrumb-bar { background: var(--cream-dark); border-bottom: 1px solid var(--border); padding: 0.6rem 2rem; }
.breadcrumb-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-light); flex-wrap: wrap; }
.breadcrumb-inner a { color: var(--terra); }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--ink-light); flex-wrap: wrap; margin-bottom: 1rem; }
.breadcrumb a { color: var(--terra); }
.breadcrumb a:hover { text-decoration: underline; }

/* ══ EXPLORE LAYOUT ════════════════════════════════════ */
.explore-layout { max-width: var(--max-w); margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
.sidebar { position: sticky; top: 80px; }
.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-label { display: block; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-light); margin-bottom: 0.6rem; }
.search-box { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.search-box input { flex: 1; border: none; background: transparent; padding: 8px 12px; font-family: inherit; font-size: 0.875rem; outline: none; color: var(--ink); }
.search-box button { background: var(--terra); color: #fff; border: none; padding: 8px 14px; cursor: pointer; font-size: 1rem; transition: background 0.2s; }
.search-box button:hover { background: var(--terra-hover); }
.dest-list { display: flex; flex-direction: column; gap: 2px; }
.dest-item { padding: 5px 9px; border-radius: var(--radius-sm); font-size: 0.845rem; color: var(--ink-mid); transition: background 0.15s; }
.dest-item:hover { background: var(--cream-dark); }
.dest-item.active { background: var(--terra-pale); color: var(--terra); font-weight: 500; }
.filter-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; font-size: 0.82rem; color: var(--ink-mid); }
.filter-chip { background: var(--cream-dark); border-radius: 99px; padding: 3px 10px; }
.filter-clear { color: var(--terra); margin-left: auto; }
.filter-clear:hover { text-decoration: underline; }
.sidebar-planner-cta { background: var(--gold-light); border: 1px solid rgba(201,151,58,0.2); border-radius: var(--radius-sm); padding: 1rem; margin-top: 1.5rem; }
.sidebar-planner-cta strong { display: block; margin: 0.25rem 0 0.35rem; font-size: 0.9rem; }
.sidebar-planner-cta p { font-size: 0.8rem; color: var(--ink-mid); }

/* ══ PAGINATION ════════════════════════════════════════ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; padding: 1rem; flex-wrap: wrap; }
.pagination a { color: var(--terra); font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 0.875rem; transition: all 0.18s; }
.pagination a:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
.pagination-current { padding: 6px 12px; border-radius: var(--radius-sm); background: var(--terra); color: #fff; font-size: 0.875rem; }
.pagination-ellipsis { color: var(--ink-light); padding: 6px 4px; }

/* ══ ARTICLE ═══════════════════════════════════════════ */
.article-layout { max-width: 800px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.article-header { margin-bottom: 2.5rem; }
.article-cover { height: 420px; background-size: cover; background-position: center; border-radius: var(--radius); margin: 1.5rem 0 2rem; position: relative; }
.article-cover-overlay { position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(to top, rgba(26,22,18,0.3), transparent 65%); }
.article-meta { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.84rem; color: var(--ink-light); }
.article-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; color: var(--ink); margin-bottom: 1rem; }
.article-summary { font-size: 1.1rem; color: var(--ink-mid); line-height: 1.75; border-left: 3px solid var(--terra); padding-left: 1.2rem; margin-bottom: 1.5rem; font-style: italic; }
.article-byline { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--ink-mid); flex-wrap: wrap; }
.author-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--terra); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.dot { color: var(--ink-light); }
.article-body { overflow: hidden; }
.article-content { line-height: 1.9; font-size: 1.05rem; color: var(--ink); }
.article-content p { margin-bottom: 1.4rem; }
.article-content h2 { font-family: 'Playfair Display', serif; font-size: 1.65rem; margin: 2.2rem 0 0.8rem; }
.article-content h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin: 1.75rem 0 0.65rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.3rem; }
.article-content li { margin-bottom: 0.35rem; }
.article-content blockquote { border-left: 3px solid var(--terra); padding-left: 1.25rem; color: var(--ink-mid); font-style: italic; margin: 1.5rem 0; }
.article-content strong { font-weight: 600; }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
.tag { background: var(--cream-dark); color: var(--ink-mid); padding: 4px 12px; border-radius: 99px; font-size: 0.81rem; transition: background 0.18s; }
.tag:hover { background: var(--terra-pale); color: var(--terra); }

/* ══ REACTIONS ═════════════════════════════════════════ */
.reactions-bar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; background: var(--cream-dark); border-radius: var(--radius); margin: 2rem 0; }
.reactions-label { font-size: 0.9rem; color: var(--ink-mid); font-weight: 500; }
.reaction-btns { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; }
.reaction-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--border); padding: 7px 16px; border-radius: 99px; cursor: pointer; font-family: inherit; font-size: 0.88rem; color: var(--ink-mid); transition: all 0.2s; text-decoration: none; }
.reaction-btn:hover { border-color: var(--terra); color: var(--terra); }
.reaction-btn.active-like { background: var(--sage-light); border-color: var(--sage); color: var(--sage); }
.reaction-btn.active-dislike { background: #FFF0E8; border-color: var(--terra); color: var(--terra); }
.reaction-icon { font-size: 1rem; }
.reactions-hint { font-size: 0.81rem; color: var(--ink-light); }
.reactions-hint a { color: var(--terra); }

/* ══ TRIP CTA (inside article) ═════════════════════════ */
.trip-cta-card { display: flex; align-items: center; gap: 1.25rem; background: var(--gold-light); border: 1px solid rgba(201,151,58,0.25); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 2rem 0; flex-wrap: wrap; }
.trip-cta-icon { font-size: 1.6rem; color: var(--gold); flex-shrink: 0; }
.trip-cta-text { flex: 1; min-width: 200px; }
.trip-cta-text strong { display: block; margin-bottom: 0.25rem; font-size: 0.95rem; }
.trip-cta-text p { font-size: 0.84rem; color: var(--ink-mid); margin: 0; }
.author-actions { display: flex; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 2rem; align-items: center; flex-wrap: wrap; }

/* ══ COMMENTS ══════════════════════════════════════════ */
.comments-section { margin-top: 2.5rem; }
.comments-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1.5rem; }
.comment-form { margin-bottom: 2rem; }
.comment-form textarea, .reply-form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font-family: inherit; font-size: 0.9rem; resize: vertical; background: #fff; color: var(--ink); }
.comment-form textarea:focus, .reply-form textarea:focus { outline: 2px solid var(--terra); border-color: transparent; }
.comment-form button { margin-top: 0.5rem; }
.comment-login-prompt { background: var(--cream-dark); padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--ink-mid); }
.comment-login-prompt a { color: var(--terra); font-weight: 500; }
.comment { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--terra-light); color: var(--terra); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
.comment-avatar.sm { width: 28px; height: 28px; font-size: 0.75rem; }
.comment-content { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.comment-header strong { font-size: 0.88rem; }
.comment-header time { font-size: 0.76rem; color: var(--ink-light); }
.edited-badge { font-size: 0.7rem; color: var(--ink-light); background: var(--cream-dark); padding: 1px 6px; border-radius: 99px; }
.comment-content p { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.65; }
.comment-actions { display: flex; gap: 0.65rem; margin-top: 0.5rem; }
.reply-toggle, .comment-delete { background: none; border: none; font: inherit; font-size: 0.76rem; color: var(--ink-light); cursor: pointer; padding: 0; transition: color 0.18s; }
.reply-toggle:hover { color: var(--terra); }
.comment-delete:hover { color: #e74c3c; }
.reply-form { margin-top: 0.75rem; }
.reply-form button { margin-top: 0.4rem; }
.replies { margin-top: 1rem; border-left: 2px solid var(--cream-dark); padding-left: 1rem; display: flex; flex-direction: column; gap: 1rem; }

/* ══ FORM PAGE ═════════════════════════════════════════ */
.form-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.form-header { margin-bottom: 2rem; }
.form-header h1 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 0.4rem; }
.form-header p { color: var(--ink-mid); }
.post-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: flex; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.form-group label { font-size: 0.845rem; font-weight: 500; color: var(--ink); }
.label-hint { font-weight: 400; color: var(--ink-light); font-size: 0.8em; }
.form-group input, .form-group textarea, .form-group select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 0.92rem; background: #fff; color: var(--ink); transition: border-color 0.2s; width: 100%; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--terra); }
.field-error { color: #e74c3c; font-size: 0.79rem; }
.field-hint { font-size: 0.77rem; color: var(--ink-light); margin-top: 4px; }
.checkbox-group { flex-direction: row; align-items: center; gap: 0; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; }
.checkbox-label input { width: auto; cursor: pointer; }
.form-actions { display: flex; justify-content: flex-end; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.editor-toolbar { display: flex; gap: 4px; padding: 6px 8px; background: var(--cream-dark); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; flex-wrap: wrap; }
.editor-toolbar button { border: 1px solid var(--border); background: #fff; padding: 3px 9px; border-radius: 4px; cursor: pointer; font-size: 0.82rem; font-family: inherit; transition: background 0.15s; }
.editor-toolbar button:hover { background: var(--cream-dark); }
.editor-toolbar + textarea { border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }

/* ══ MY POSTS ══════════════════════════════════════════ */
.my-posts-list { max-width: 900px; margin: 2rem auto; padding: 0 2rem; display: flex; flex-direction: column; gap: 1rem; }
.my-post-item { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-items: stretch; transition: box-shadow 0.2s; }
.my-post-item:hover { box-shadow: var(--shadow); }
.my-post-img { width: 140px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--cream-dark); }
.my-post-body { flex: 1; padding: 1rem; }
.my-post-body h3 { font-family: 'Playfair Display', serif; font-size: 1rem; margin: 0.3rem 0 0.5rem; }
.my-post-body h3 a:hover { color: var(--terra); }
.my-post-meta { display: flex; gap: 0.65rem; font-size: 0.77rem; color: var(--ink-light); align-items: center; flex-wrap: wrap; }
.my-post-stats { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--ink-light); margin-top: 0.4rem; flex-wrap: wrap; }
.my-post-actions { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; justify-content: center; flex-shrink: 0; }
.page-header { background: var(--ink); color: var(--cream); padding: 3rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.page-header h1 { font-family: 'Playfair Display', serif; font-size: 2rem; }

/* ══ AUTH ═══════════════════════════════════════════════ */
.auth-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 440px; box-shadow: var(--shadow); }
.auth-header { text-align: center; margin-bottom: 1.75rem; }
.auth-header h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin: 0.5rem 0 0.25rem; }
.auth-header p { color: var(--ink-mid); font-size: 0.9rem; }
.brand-icon.large { font-size: 2.5rem; display: block; }
.auth-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 1.5rem; }
.perk { font-size: 0.8rem; color: var(--sage); background: var(--sage-light); padding: 5px 8px; border-radius: var(--radius-sm); }
.gold-perk { color: var(--premium); background: var(--gold-light); grid-column: 1 / -1; }
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--ink-mid); }
.auth-footer a { color: var(--terra); font-weight: 500; }
.auth-terms { text-align: center; font-size: 0.75rem; color: var(--ink-light); margin-top: 0.75rem; }
.demo-hint { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--sage-light); border-radius: var(--radius-sm); font-size: 0.81rem; color: var(--sage); }
.validation-summary { background: #FFF0EC; border: 1px solid #F0C0A8; border-radius: var(--radius-sm); padding: 0.7rem 1rem; font-size: 0.84rem; color: #8B3A1A; margin-bottom: 1rem; }
.validation-summary ul { padding-left: 1.2rem; }

/* ══ PLANNER PAGE ══════════════════════════════════════ */
.planner-page {}
.planner-hero { background: linear-gradient(135deg, var(--ink) 0%, #2D2520 100%); color: var(--cream); padding: 4rem 2rem 3rem; text-align: center; }
.planner-hero-inner { max-width: 680px; margin: 0 auto; }
.planner-title { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1.15; margin: 1rem 0 1.25rem; }
.planner-title em { color: var(--gold); font-style: italic; }
.planner-sub { color: rgba(250,247,242,0.75); font-size: 1rem; line-height: 1.8; margin-bottom: 1.75rem; }
.plan-badges { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.plan-badge { padding: 5px 14px; border-radius: 99px; font-size: 0.8rem; font-weight: 500; }
.free-badge { background: rgba(91,122,94,0.25); color: #b8d8ba; border: 1px solid rgba(91,122,94,0.4); }
.premium-badge { background: rgba(201,151,58,0.2); color: var(--gold); border: 1px solid rgba(201,151,58,0.4); }
.planner-form-section { padding: 2.5rem 2rem; }
.planner-form-wrap { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.planner-form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.planner-form-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 1.5rem; }
.planner-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.planner-field label { font-size: 0.845rem; font-weight: 500; color: var(--ink); }
.planner-input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 0.92rem; background: #fff; color: var(--ink); width: 100%; transition: border-color 0.2s; }
.planner-input-lg { font-size: 1.02rem; padding: 12px 14px; }
.planner-input:focus { outline: none; border-color: var(--gold); }
.planner-select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: inherit; font-size: 0.88rem; background: #fff; color: var(--ink); width: 100%; cursor: pointer; }
.planner-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.plan-tier-select { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.25rem; }
.plan-tier { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); transition: background 0.18s; cursor: default; }
.plan-tier:last-child { border-bottom: none; }
.plan-premium { cursor: pointer; }
.plan-premium:hover { background: var(--gold-light); }
.active-tier { background: var(--sage-light); }
.plan-premium.active-tier { background: var(--gold-light) !important; }
.tier-check { width: 22px; height: 22px; border-radius: 50%; background: var(--sage-light); color: var(--sage); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; }
.tier-check.gold { background: var(--gold-light); color: var(--gold); }
.tier-info { flex: 1; }
.tier-info strong { display: block; font-size: 0.875rem; }
.tier-info span { font-size: 0.775rem; color: var(--ink-light); }
.tier-price { font-size: 0.82rem; font-weight: 600; color: var(--ink-light); white-space: nowrap; }
.tier-price.gold { color: var(--gold); }
.btn-generate { width: 100%; padding: 13px; background: var(--gold); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.btn-generate:hover { background: var(--gold-hover); }
.btn-generate:disabled { opacity: 0.65; cursor: not-allowed; }
.planner-features { background: var(--cream-dark); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.planner-features h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: 1.1rem; }
.feature-row { display: flex; flex-direction: column; gap: 1rem; }
.feature-item { background: #fff; border-radius: var(--radius-sm); padding: 1rem; }
.feature-item strong { display: block; font-size: 0.875rem; margin-bottom: 0.6rem; color: var(--ink); }
.free-feature strong { color: var(--sage); }
.premium-feature strong { color: var(--gold); }
.feature-item ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.feature-item li { font-size: 0.8rem; color: var(--ink-mid); }
.login-gate { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; text-align: center; }
.gate-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.login-gate h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 0.75rem; }
.login-gate p { color: var(--ink-mid); margin-bottom: 1.5rem; }
.gate-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ══ RESULT PAGE ═══════════════════════════════════════ */
.result-page { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.result-header { margin-bottom: 2rem; }
.result-header h1 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 0.5rem; }
.result-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-light); }
.result-meta span { background: var(--cream-dark); padding: 3px 10px; border-radius: 99px; }
.result-meta .premium-badge-sm { background: var(--gold-light); color: var(--gold); }
.plan-output { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin: 1.5rem 0; }
.plan-output h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--ink); margin: 1.5rem 0 0.65rem; }
.plan-output h3:first-child { margin-top: 0; }
.plan-output p { margin-bottom: 0.9rem; color: var(--ink-mid); line-height: 1.75; }
.plan-output ul, .plan-output ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.plan-output li { margin-bottom: 0.35rem; color: var(--ink-mid); }
.plan-output strong { color: var(--ink); font-weight: 600; }
.upgrade-teaser { display: flex; align-items: center; gap: 1.25rem; background: var(--gold-light); border: 1px solid rgba(201,151,58,0.25); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 2rem 0; flex-wrap: wrap; }
.teaser-icon { font-size: 2rem; color: var(--gold); flex-shrink: 0; }
.teaser-text { flex: 1; min-width: 200px; }
.teaser-text strong { display: block; margin-bottom: 0.25rem; }
.teaser-text p { font-size: 0.84rem; color: var(--ink-mid); margin: 0; }
.result-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; align-items: center; }

/* ══ MY PLANS ══════════════════════════════════════════ */
.my-plans-wrap { max-width: 820px; margin: 2rem auto; padding: 0 2rem; }
.plans-list { display: flex; flex-direction: column; gap: 1rem; }
.plan-item { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.5rem; transition: box-shadow 0.2s; }
.plan-item:hover { box-shadow: var(--shadow); }
.plan-item-icon { font-size: 1.5rem; flex-shrink: 0; color: var(--gold); }
.plan-item-body { flex: 1; min-width: 0; }
.plan-item-body h3 { font-size: 1rem; margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-duration { font-weight: 400; color: var(--ink-light); font-size: 0.85rem; }
.plan-item-meta { font-size: 0.77rem; color: var(--ink-light); display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.plan-item-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ══ UPGRADE PAGE ══════════════════════════════════════ */
.upgrade-page { max-width: 900px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.upgrade-nudge { background: var(--terra-pale); border: 1px solid var(--terra-light); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 2rem; color: var(--terra); font-size: 0.9rem; }
.upgrade-hero { text-align: center; margin-bottom: 3rem; }
.upgrade-star { font-size: 2.5rem; color: var(--gold); display: block; margin-bottom: 1rem; }
.upgrade-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 0.75rem; }
.upgrade-hero em { color: var(--gold); font-style: italic; }
.upgrade-hero p { color: var(--ink-mid); max-width: 520px; margin: 0 auto; line-height: 1.75; }
.pricing-cards { display: grid; grid-template-columns: 1fr 1.05fr; gap: 1.5rem; margin-bottom: 2rem; }
.pricing-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 2rem; }
.premium-card { border-color: var(--gold); position: relative; }
.popular-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 0.74rem; font-weight: 600; padding: 3px 14px; border-radius: 99px; white-space: nowrap; }
.pricing-card h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 0.4rem; }
.price { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.price span { font-size: 1rem; font-weight: 400; color: var(--ink-light); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
.pricing-features li { font-size: 0.86rem; color: var(--ink-mid); }
.pricing-features li.dim { color: var(--ink-light); }
.premium-card .pricing-features li { color: var(--premium); }
.upgrade-note { text-align: center; font-size: 0.75rem; color: var(--ink-light); margin-top: 0.75rem; }
.upgrade-guarantee { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.84rem; color: var(--ink-mid); margin-top: 1rem; }

/* ══ PLANNER HOME CTA ══════════════════════════════════ */
.planner-cta-section { background: linear-gradient(135deg, var(--ink) 0%, #2D2520 100%); color: var(--cream); padding: 4rem 2rem; }
.planner-cta-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.planner-cta-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3vw,2.8rem); margin-bottom: 1rem; }
.planner-cta-text em { color: var(--gold); font-style: italic; }
.planner-cta-text p { color: rgba(250,247,242,0.75); line-height: 1.8; margin-bottom: 1.25rem; }
.planner-cta-features { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.planner-cta-features span { color: rgba(250,247,242,0.7); }
.planner-cta-features span:last-child { color: var(--gold); }
.planner-cta-visual { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); overflow: hidden; }
.cta-card-header { background: var(--gold); color: #fff; padding: 0.75rem 1.25rem; font-size: 0.85rem; font-weight: 600; }
.cta-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cta-day { display: flex; flex-direction: column; gap: 2px; }
.cta-day strong { font-size: 0.77rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(250,247,242,0.5); }
.cta-day span { font-size: 0.88rem; color: rgba(250,247,242,0.85); }
.cta-day.muted span { color: rgba(250,247,242,0.4); font-style: italic; }

/* ══ TOAST ══════════════════════════════════════════════ */
.toast { position: fixed; top: 70px; right: 1.5rem; z-index: 999; padding: 11px 20px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; animation: slideIn 0.3s ease, fadeOut 0.5s ease 3.5s forwards; box-shadow: var(--shadow-lg); max-width: 340px; }
.toast-success { background: var(--sage); color: #fff; }
.toast-error { background: #c0392b; color: #fff; }
@keyframes slideIn { from { opacity:0; transform:translateX(1rem); } to { opacity:1; transform:none; } }
@keyframes fadeOut { to { opacity:0; pointer-events:none; } }

/* ══ EMPTY STATE ════════════════════════════════════════ */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--ink-mid); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.empty-state p { font-size: 1rem; }

/* ══ FOOTER ═════════════════════════════════════════════ */
.footer { background: var(--ink); color: var(--cream); margin-top: 4rem; padding: 2.5rem 2rem 1.25rem; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(250,247,242,0.1); flex-wrap: wrap; }
.footer-brand { max-width: 220px; }
.footer-brand .brand-text { color: var(--cream); }
.footer-brand .brand-icon { color: var(--cream); }
.footer-brand p { color: rgba(250,247,242,0.5); font-size: 0.82rem; margin-top: 0.5rem; line-height: 1.65; }
.footer-domain { color: var(--gold) !important; font-weight: 500; }
.footer-domain a { color: var(--gold); }
.footer-cols { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(250,247,242,0.35); margin-bottom: 0.25rem; }
.footer-col a { color: rgba(250,247,242,0.6); font-size: 0.845rem; transition: color 0.18s; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { max-width: var(--max-w); margin: 0.75rem auto 0; font-size: 0.75rem; color: rgba(250,247,242,0.3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.footer-bottom a { color: rgba(250,247,242,0.4); }
.footer-bottom a:hover { color: rgba(250,247,242,0.7); }

/* ══ PRINT ══════════════════════════════════════════════ */
@media print {
  .navbar, .footer, .ad-strip, .ad-banner-wrap, .ad-in-content, .ad-section, .sidebar-ad, .article-sidebar-ad,
  .trip-cta-card, .upgrade-teaser, .result-actions, .btn-generate, .premium-strip { display: none !important; }
}

/* ══ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width: 1024px) {
  .planner-form-wrap { grid-template-columns: 1fr; }
  .planner-cta-inner { grid-template-columns: 1fr; }
  .planner-cta-visual { display: none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; gap: 2rem; }
  .hero-visual { display: none; }
  .featured-grid { grid-template-columns: 1fr; }
  .post-card-hero { grid-row: auto; }
  .explore-layout { grid-template-columns: 1fr; padding: 1.5rem; }
  .sidebar { position: static; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
  .sidebar-section { margin-bottom: 0; flex: 1; min-width: 180px; }
  .sidebar-ad { display: none; }
  .article-sidebar-ad { float: none; width: 100%; margin: 1.5rem 0; }
  .planner-row { grid-template-columns: 1fr 1fr; }
  .pricing-cards { grid-template-columns: 1fr; }
  .footer-cols { gap: 2rem; }
  .form-row { flex-direction: column; }
  .my-post-item { flex-direction: column; }
  .my-post-img { width: 100%; height: 160px; }
  .nav-links { gap: 0.75rem; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 1rem; }
  .nav-toggle { display: flex; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0; background: rgba(250,247,242,0.98); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem 1.5rem; gap: 1rem; backdrop-filter: blur(12px); z-index: 199; }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 0.95rem; }
  .section { padding: 2rem 1rem; }
  .section-inner { padding: 0 1rem; }
  .article-layout { padding: 0 1rem 3rem; }
  .result-page { padding: 0 1rem 3rem; }
  .upgrade-page { padding: 2rem 1rem 4rem; }
  .planner-form-section { padding: 1.5rem 1rem; }
  .planner-row { grid-template-columns: 1fr; }
  .premium-strip-inner { flex-direction: column; gap: 0.75rem; text-align: center; }
  .trip-cta-card { flex-direction: column; text-align: center; }
  .upgrade-teaser { flex-direction: column; text-align: center; }
  .auth-perks { grid-template-columns: 1fr; }
  .destinations-strip { padding: 1.5rem 0; }
  .destinations-strip .section-inner { padding: 0 1rem; }
}

/* ══ TRIP PLANNER — NEW FORM STYLES ═══════════════════ */
.route-row { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 0.5rem; align-items: end; margin-bottom: 1.1rem; }
.route-arrow { font-size: 1.4rem; color: var(--terra); text-align: center; padding-bottom: 10px; font-weight: 700; }
.three-col { grid-template-columns: 1fr 1fr 1fr; }
.style-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.style-chip { background: var(--cream-dark); border: 1.5px solid var(--border); color: var(--ink-mid);
  padding: 5px 13px; border-radius: 99px; font-size: 0.82rem; cursor: pointer; font-family: inherit;
  transition: all 0.18s; }
.style-chip:hover { border-color: var(--terra); color: var(--terra); }
.style-chip.active { background: var(--terra); border-color: var(--terra); color: #fff; }
@@media (max-width: 640px) {
  .route-row { grid-template-columns: 1fr; }
  .route-arrow { display: none; }
  .three-col { grid-template-columns: 1fr 1fr; }
}

/* ══ IMAGE FALLBACK ════════════════════════════════════ */
/* If a cover image URL fails to load, show a styled placeholder */
.post-card-img, .post-card-sm-img, .article-cover, .my-post-img {
  background-color: var(--cream-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ctext y='45' font-size='50' opacity='0.15'%3E✈%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.hero-card img { background: var(--cream-dark); }