/* ============================================
   АМИСТ — Blog Article V2: Premium Magazine Layout
   Immersive hero + prose/sidebar grid + tour cards
   ============================================ */

/* ── Reading Progress Bar ───────────────── */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold-500));
  z-index: calc(var(--z-header) + 1);
  transition: width 80ms linear;
  pointer-events: none;
}

/* ── Immersive Hero ─────────────────────── */

.blog-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .blog-hero {
    min-height: 60vh;
  }
}

.blog-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.blog-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(4, 13, 26, 0.95) 0%,
    rgba(4, 13, 26, 0.75) 40%,
    rgba(4, 13, 26, 0.35) 70%,
    rgba(4, 13, 26, 0.1) 100%
  );
}

.blog-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-px) var(--space-10);
}

@media (min-width: 768px) {
  .blog-hero__content {
    padding-bottom: var(--space-16);
  }
}

.blog-hero__breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.blog-hero__breadcrumbs a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-hero__breadcrumbs a:hover {
  color: var(--color-text-on-dark);
}

.blog-hero__breadcrumbs span[aria-hidden] {
  color: rgba(255, 255, 255, 0.4);
}

.blog-hero__breadcrumbs-current {
  color: rgba(255, 255, 255, 0.9);
}

.blog-hero__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: var(--space-4);
}

.blog-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: var(--font-bold);
  color: var(--color-text-on-dark);
  line-height: var(--leading-tight);
  max-width: 800px;
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
}

.blog-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.blog-hero__meta-sep {
  opacity: 0.4;
}

/* ── Two-Column Body Layout ─────────────── */

.blog-body {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--container-px) var(--space-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .blog-body {
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
  }
}

@media (min-width: 1280px) {
  .blog-body {
    grid-template-columns: 1fr 340px;
  }
}

.article-premium-wide .blog-body {
  max-width: var(--container-max);
}

.article-premium-wide .blog-content > p,
.article-premium-wide .blog-content > ul,
.article-premium-wide .blog-content > ol,
.article-premium-wide .blog-content > blockquote {
  max-width: 100%;
}

/* ── Sticky top line TOC ────────────────── */

.article-topline-toc {
  position: sticky;
  top: 72px;
  z-index: calc(var(--z-header) - 1);
  border-top: 1px solid rgba(11, 29, 58, 0.08);
  border-bottom: 1px solid rgba(11, 29, 58, 0.08);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.article-topline-toc__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px var(--container-px);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  overflow-x: auto;
  white-space: nowrap;
}

.article-topline-toc__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: var(--font-semibold);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border);
}

.article-topline-toc__link {
  font-size: var(--text-sm);
  color: var(--color-primary-800);
  text-decoration: none;
  opacity: 0.74;
  transition: opacity var(--transition-base), color var(--transition-base);
}

.article-topline-toc__link:hover {
  color: var(--color-accent);
  opacity: 1;
}

.article-topline-toc__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.article-topline-toc__link--active {
  color: var(--color-accent);
  opacity: 1;
  font-weight: var(--font-semibold);
}

@media (max-width: 1023px) {
  .article-topline-toc {
    display: none;
  }
}

/* ── Main Content Column ────────────────── */

.blog-content {
  min-width: 0; /* prevent grid blowout */
}

.blog-content__inner {
  /* No additional styles needed, inherits from .blog-content */
}

/* Prose styles */
.blog-content > p,
.blog-content > ul,
.blog-content > ol,
.blog-content > blockquote {
  max-width: 720px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .blog-content > p,
  .blog-content > ul,
  .blog-content > ol {
    font-size: var(--text-lg);
    line-height: 1.8;
  }
}

.blog-content > p {
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}

.blog-content > p:first-of-type {
  font-size: var(--text-lg);
  color: var(--color-gray-700);
  line-height: 1.8;
}

@media (min-width: 768px) {
  .blog-content > p:first-of-type {
    font-size: var(--text-xl);
  }
}

.blog-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-base);
}

.blog-content a:hover {
  color: var(--color-accent-hover);
}

.blog-content strong {
  font-weight: var(--font-semibold);
  color: var(--color-primary-800);
}

/* ── Section Headings ───────────────────── */

.blog-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-800);
  line-height: var(--leading-tight);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 80px;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .blog-content h2 {
    font-size: var(--text-3xl);
  }
}

.blog-content h2:first-of-type {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.blog-content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-800);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.blog-content li {
  text-wrap: pretty;
}

/* ── Island Carousel Cards ─────────────── */

.island-carousel {
  margin: var(--space-6) 0 var(--space-10);
}

.island-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.island-carousel__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.island-carousel__controls {
  display: inline-flex;
  gap: var(--space-2);
}

.island-carousel__btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary-800);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-base);
}

.island-carousel__btn:hover {
  background: var(--color-primary-800);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary-800);
}

.island-carousel__btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.island-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  justify-content: flex-start;
  padding: 0 calc(var(--space-3) + 1vw) var(--space-3);
}

.island-carousel__track::-webkit-scrollbar {
  height: 8px;
}

.island-carousel__track::-webkit-scrollbar-thumb {
  background: rgba(11, 29, 58, 0.24);
  border-radius: 99px;
}

.island-card {
  position: relative;
  background: linear-gradient(150deg, var(--color-bg), var(--color-gray-50));
  border: 1px solid rgba(11, 29, 58, 0.09);
  border-radius: 24px;
  padding: var(--space-6);
  scroll-snap-align: start;
  box-shadow: 0 12px 30px rgba(11, 29, 58, 0.08);
  min-height: 220px;
  opacity: 0.62;
  transform: scale(0.93);
  transition: transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base);
}

.island-card--arc:nth-child(odd) {
  translate: 0 -5px;
}

.island-card--arc:nth-child(even) {
  translate: 0 8px;
}

.island-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary-800);
  background: rgba(11, 29, 58, 0.06);
  margin-bottom: var(--space-4);
}

.island-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-primary-800);
}

.blog-content .island-card__title {
  margin: 0 0 var(--space-3);
  padding-top: 0;
  border-top: 0;
}

.island-card__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
}

.island-card--dark {
  background: radial-gradient(circle at top right, var(--color-primary-500), var(--color-primary-700) 62%);
  border-color: rgba(255, 255, 255, 0.18);
}

.island-card--dark .island-card__tag {
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, 0.18);
}

.island-card--dark .island-card__title,
.island-card--dark .island-card__text {
  color: var(--color-text-on-dark);
}

.island-card--active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 22px 44px rgba(11, 29, 58, 0.18);
}

.island-carousel__dots {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  gap: 8px;
}

.island-carousel__dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 99px;
  background: rgba(11, 29, 58, 0.24);
  cursor: pointer;
  transition: all var(--transition-base);
}

.island-carousel__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.island-carousel__dot.is-active {
  width: 20px;
  background: var(--color-accent);
}

/* ── Wave 4: motion/a11y polish ────────── */
@media (prefers-reduced-motion: reduce) {
  .reading-progress,
  .blog-hero__breadcrumbs a,
  .article-topline-toc__link,
  .blog-content a,
  .island-carousel__btn,
  .island-card,
  .island-carousel__dot,
  .weather-card,
  .article-snapshot__item,
  .article-premium-wide,
  .blog-cta-v2,
  .tour-card-v2 {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Weather strip (article data block) ─── */

.weather-strip {
  margin: var(--space-8) 0 var(--space-10);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .weather-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.weather-card {
  background: linear-gradient(155deg, #f7fbff 0%, #eff5fb 100%);
  border: 1px solid rgba(11, 29, 58, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.weather-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-primary-800);
}

.weather-card__temp {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
}

.weather-card__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Article Data Table ─────────────────── */

.article-data-table {
  margin: var(--space-8) 0;
  border: 1px solid rgba(11, 29, 58, 0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg);
}

.article-data-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.article-data-table__table th,
.article-data-table__table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11, 29, 58, 0.08);
  text-align: left;
}

.article-data-table__table th {
  background: rgba(11, 29, 58, 0.04);
  color: var(--color-primary-800);
  font-weight: var(--font-semibold);
}

/* ── Article CTA Strip ──────────────────── */

.article-cta-strip {
  margin: var(--space-8) 0 var(--space-10);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--color-primary-700) 0%, var(--color-primary-600) 100%);
  color: var(--color-text-on-dark);
  display: grid;
  gap: var(--space-4);
}

.article-cta-strip__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.article-cta-strip__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.article-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Tour Card (inline article) ─────────── */

.tour-card-v2 {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: var(--space-8) 0;
  transition: box-shadow var(--transition-base);
}

.tour-card-v2:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.tour-card-v2__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.tour-card-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.tour-card-v2:hover .tour-card-v2__image img {
  transform: scale(1.03);
}

.tour-card-v2__image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.tour-card-v2__price-badge {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-on-dark);
  white-space: nowrap;
}

.tour-card-v2__price-badge small {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  opacity: 0.8;
  display: block;
}

.tour-card-v2__season-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.tour-card-v2__body {
  padding: var(--space-6) var(--space-6) var(--space-8);
}

@media (min-width: 768px) {
  .tour-card-v2__body {
    padding: var(--space-8) var(--space-8) var(--space-10);
  }
}

.tour-card-v2__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-800);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .tour-card-v2__title {
    font-size: var(--text-2xl);
  }
}

.tour-card-v2__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

/* Tour meta pills */
.tour-card-v2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.tour-card-v2__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.tour-card-v2__pill svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Tour description inside card */
.tour-card-v2__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.tour-card-v2__desc p {
  margin-bottom: var(--space-3);
}

/* Highlights grid */
.tour-card-v2__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (max-width: 480px) {
  .tour-card-v2__highlights {
    grid-template-columns: 1fr;
  }
}

.tour-card-v2__highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  line-height: 1.5;
}

.tour-card-v2__highlight-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 1px;
}

/* Tour card actions */
.tour-card-v2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}

.tour-card-v2__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 24px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  text-decoration: none;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
}

.tour-card-v2__btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
}

.tour-card-v2__btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-button);
}

.tour-card-v2__btn--outline {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.tour-card-v2__btn--outline:hover {
  background: var(--color-accent-light);
}

/* ── Fact Card V2 ───────────────────────── */

.blog-fact-v2 {
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-600));
  color: var(--color-text-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin: var(--space-8) 0;
  position: relative;
  overflow: hidden;
}

.blog-fact-v2::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.blog-fact-v2__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-fact-v2__title svg {
  width: 22px;
  height: 22px;
  color: var(--color-gold-500);
}

.blog-fact-v2__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .blog-fact-v2__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.blog-fact-v2__item {
  text-align: center;
}

.blog-fact-v2__value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  font-family: var(--font-heading);
  margin-bottom: 2px;
}

.blog-fact-v2__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

/* ── Info Box (tips, notes) ─────────────── */

.blog-infobox {
  background: var(--color-primary-50);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  max-width: 720px;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.blog-infobox--tip {
  background: var(--color-success-light);
  border-left: 4px solid var(--color-success);
}

.blog-infobox--warning {
  background: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
}

.blog-infobox__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.blog-infobox--tip .blog-infobox__icon {
  color: var(--color-success);
}

.blog-infobox__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

.blog-infobox__text strong {
  display: block;
  font-weight: var(--font-semibold);
  color: var(--color-primary-800);
  margin-bottom: 2px;
}

/* ── Pull Quote ─────────────────────────── */

.blog-pullquote {
  margin: var(--space-10) 0;
  padding: var(--space-6) 0;
  border-top: 2px solid var(--color-primary-800);
  border-bottom: 2px solid var(--color-primary-800);
}

.blog-pullquote__text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-primary-800);
  line-height: var(--leading-snug);
  font-style: italic;
}

@media (min-width: 768px) {
  .blog-pullquote__text {
    font-size: var(--text-2xl);
  }
}

.blog-pullquote__source {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: normal;
}

/* ── Comparison Table V2 ────────────────── */

.blog-table-wrap {
  margin: var(--space-8) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.blog-table-v2 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 600px;
}

.blog-table-v2 thead {
  background: var(--color-primary-800);
  color: var(--color-text-on-dark);
}

.blog-table-v2 th {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-semibold);
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.blog-table-v2 td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.blog-table-v2 tbody tr {
  transition: background var(--transition-base);
}

.blog-table-v2 tbody tr:hover {
  background: var(--color-gray-50);
}

.blog-table-v2 tbody tr:last-child td {
  border-bottom: none;
}

.blog-table-v2__tour-name {
  font-weight: var(--font-semibold);
  color: var(--color-primary-800);
}

.blog-table-v2__price {
  font-weight: var(--font-bold);
  color: var(--color-accent);
  white-space: nowrap;
}

.blog-table-v2__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.blog-table-v2__badge--yes {
  background: var(--color-success-light);
  color: #166534;
}

.blog-table-v2__badge--no {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

/* ── CTA Block V2 ───────────────────────── */

.blog-cta-v2 {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
  margin: var(--space-10) 0;
  color: var(--color-text-on-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-cta-v2::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.blog-cta-v2__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .blog-cta-v2__title {
    font-size: var(--text-2xl);
  }
}

.blog-cta-v2__text {
  font-size: var(--text-sm);
  opacity: 0.85;
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-relaxed);
}

.blog-cta-v2__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.blog-cta-v2__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}

.blog-cta-v2__btn--white {
  background: var(--color-bg);
  color: var(--color-primary-800);
}

.blog-cta-v2__btn--white:hover {
  background: var(--color-gray-100);
  transform: translateY(-1px);
}

.blog-cta-v2__btn--ghost {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.blog-cta-v2__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.25);
}

.blog-cta-v2__phone {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  opacity: 0.7;
}

.blog-cta-v2__phone a {
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-weight: var(--font-semibold);
  opacity: 1;
}

/* ── FAQ V2 ─────────────────────────────── */

.blog-faq-v2 {
  margin: var(--space-12) 0;
}

.blog-faq-v2__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-800);
  margin-bottom: var(--space-6);
  scroll-margin-top: 80px;
}

.blog-faq-v2__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.blog-faq-v2__item[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-200);
}

.blog-faq-v2__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-primary-800);
  text-align: left;
  cursor: pointer;
  gap: var(--space-3);
  list-style: none;
}

.blog-faq-v2__question::-webkit-details-marker {
  display: none;
}

.blog-faq-v2__question:hover {
  color: var(--color-accent);
}

.blog-faq-v2__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-accent);
}

.blog-faq-v2__item[open] .blog-faq-v2__icon {
  transform: rotate(45deg);
}

.blog-faq-v2__answer {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.blog-faq-v2__answer a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── Sidebar ────────────────────────────── */

.blog-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .blog-sidebar {
    display: block;
    align-self: stretch;
  }
}

.blog-sidebar__inner {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

/* Sidebar TOC */
.sidebar-toc {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}

.sidebar-toc__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.sidebar-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-toc__list li {
  margin-bottom: 2px;
}

.sidebar-toc__link {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 6px var(--space-3);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all var(--transition-base);
  line-height: 1.4;
}

.sidebar-toc__link:hover {
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.sidebar-toc__link--active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: var(--color-accent-light);
  font-weight: var(--font-medium);
}

/* Sidebar CTA */
.sidebar-cta {
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-600));
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: var(--color-text-on-dark);
  text-align: center;
}

.sidebar-cta__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.sidebar-cta__text {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.sidebar-cta__btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--color-bg);
  color: var(--color-primary-800);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-base);
  margin-bottom: var(--space-3);
}

.sidebar-cta__btn:hover {
  background: var(--color-gray-100);
}

.sidebar-cta__phone {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.sidebar-cta__phone a {
  color: var(--color-text-on-dark);
  text-decoration: none;
}

/* Sidebar Share */
.sidebar-share {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}

.sidebar-share__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.sidebar-share__links {
  display: flex;
  gap: var(--space-2);
}

.sidebar-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
  text-decoration: none;
}

.sidebar-share__link:hover {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
}

.sidebar-share__link svg {
  width: 18px;
  height: 18px;
}

/* ── Author Block V2 ───────────────────── */

.blog-author-v2 {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-8);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  margin: var(--space-12) 0;
}

@media (max-width: 640px) {
  .blog-author-v2 {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.blog-author-v2__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}

.blog-author-v2__name {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-primary-800);
  margin-bottom: 2px;
}

.blog-author-v2__role {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.blog-author-v2__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Related Articles V2 ───────────────── */

.blog-related-v2 {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.blog-related-v2__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-800);
  margin-bottom: var(--space-8);
}

/* Reuse blog-grid from blog.css for related cards */

/* ── Mobile TOC (collapsed) ─────────────── */

.mobile-toc {
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .mobile-toc {
    display: none;
  }
}

.mobile-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-800);
  cursor: pointer;
  list-style: none;
}

.mobile-toc__toggle::-webkit-details-marker {
  display: none;
}

.mobile-toc__toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
  color: var(--color-accent);
}

.mobile-toc[open] .mobile-toc__toggle svg {
  transform: rotate(180deg);
}

.mobile-toc__list {
  list-style: none;
  padding: var(--space-3) var(--space-5);
  margin: 0;
}

.mobile-toc__list li {
  margin-bottom: var(--space-1);
}

.mobile-toc__list a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1) 0;
  display: block;
}

.mobile-toc__list a:hover {
  color: var(--color-accent);
}

/* ── Article Snapshot ───────────────────── */

.article-snapshot {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .article-snapshot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.article-snapshot__item {
  background: linear-gradient(155deg, #f7fbff 0%, #eef4fb 100%);
  border: 1px solid rgba(11, 29, 58, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.article-snapshot__label {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.article-snapshot__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  color: var(--color-primary-800);
  margin-bottom: var(--space-2);
}

.article-snapshot__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Back to Top Button ─────────────────── */

.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-800);
  color: var(--color-text-on-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: var(--z-sticky);
}

.back-to-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ── Utility: full-bleed in grid ────────── */

.blog-content > .full-bleed {
  margin-left: 0;
  margin-right: 0;
}

/* ── Landing-style blog layout ─────────── */
/* Full-width single column, centered content, Playfair Display throughout */

.blog-body--landing {
  display: block;
  max-width: var(--container-max, 1440px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6, 1.5rem);
  padding-right: var(--space-6, 1.5rem);
  padding-top: var(--space-10, 2.5rem);
  padding-bottom: var(--space-16, 4rem);
}

/* Playfair Display for all text in landing layout */
.blog-body--landing {
  font-family: var(--font-heading);
}
.blog-body--landing p,
.blog-body--landing li,
.blog-body--landing dd,
.blog-body--landing dt,
.blog-body--landing summary,
.blog-body--landing .blog-faq-v2__answer {
  font-family: var(--font-heading);
}

.blog-body--landing .blog-content {
  max-width: 100%;
}

.blog-body--landing .blog-content__inner {
  max-width: 760px;
  margin: 0 auto;
}

.blog-body--landing .blog-content__inner > p,
.blog-body--landing .blog-content__inner > ul,
.blog-body--landing .blog-content__inner > ol,
.blog-body--landing .blog-content__inner > blockquote,
.blog-body--landing .blog-content__inner > h2 {
  max-width: 100%;
}

/* Widgets — full container width (inherits from blog-body--landing) */
.blog-body--landing .climate-widget,
.blog-body--landing .packing-widget,
.blog-body--landing #budget-widget,
.blog-body--landing #sights-widget,
.blog-body--landing #tours-widget,
.blog-body--landing .guide-widget {
  max-width: 100%;
}

/* Fact block — full container width */
.blog-body--landing .blog-fact-v2 {
  max-width: 100%;
  border-radius: var(--radius-lg, 12px);
}

/* CTA blocks — match nav width, centered */
.blog-body--landing .blog-cta-v2 {
  max-width: var(--container-max, 1440px);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-lg, 12px);
}

/* FAQ section — readable width, centered */
.blog-body--landing .blog-faq-v2 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Author block — readable width, centered */
.blog-body--landing .blog-author-v2 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Focus-Visible (Accessibility) ──────── */

.blog-content a:focus-visible,
.tour-card-v2__btn:focus-visible,
.blog-cta-v2__btn:focus-visible,
.sidebar-cta__btn:focus-visible,
.sidebar-toc__link:focus-visible,
.sidebar-share__link:focus-visible,
.blog-faq-v2__question:focus-visible,
.mobile-toc__toggle:focus-visible,
.back-to-top:focus-visible,
.blog-hero__breadcrumbs a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-fact-v2__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .island-carousel__track {
    grid-auto-columns: minmax(260px, 320px);
  }

  .blog-content {
    padding: 0 1.5rem;
  }
}

/* ── Print styles ───────────────────────── */

@media print {
  .reading-progress,
  .blog-sidebar,
  .back-to-top,
  .blog-cta-v2,
  .sidebar-cta {
    display: none !important;
  }

  .blog-hero {
    min-height: auto;
    max-height: none;
  }
}

/* ── Utility: table-responsive ─────────── */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════
   FIX: Contrast, visibility, layout issues
   ════════════════════════════════════════════ */

/* 1. Invisible button text in tour cards — force white on accent bg */
.tour-card-v2__btn.tour-card-v2__btn--primary {
  color: #fff;
}

/* 2. Invisible CTA strip button — force white */
.article-cta-strip .btn.btn--primary {
  color: #fff;
}

/* 3. Dark titles on dark gradient sections — must beat .blog-content h2/h3 (0-1-1) */
.blog-content .article-cta-strip__title,
.blog-content .blog-fact-v2__title,
.blog-content .blog-cta-v2__title,
.article-cta-strip__title,
.blog-fact-v2__title,
.blog-cta-v2__title {
  color: #fff;
}

/* 4. Sticky sidebar — parent must stretch full grid height for sticky to work */
@media (min-width: 1024px) {
  .blog-sidebar {
    align-self: stretch;
  }
}

.blog-sidebar__inner {
  position: sticky;
  top: 130px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

/* 5. Ghost link in CTA strip — improve contrast on dark bg */
.article-cta-strip .btn.btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* 6. Ghost buttons in CTA sections — improve contrast */
.blog-cta-v2__btn.blog-cta-v2__btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* 8. Compact horizontal tour cards */
.tour-card-v2 {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(11, 29, 58, 0.08);
  margin: var(--space-4) 0;
}

.tour-card-v2:hover {
  transform: translateY(-2px);
}

.tour-card-v2__image {
  aspect-ratio: 3 / 4;
  max-height: 300px;
  overflow: hidden;
}

.tour-card-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Price overlay — compact, rounded bottom-right */
.tour-card-v2__image-overlay {
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  border-radius: 0 0 12px 0;
  gap: var(--space-2);
}

.tour-card-v2__price-badge {
  font-size: var(--text-base);
}

.tour-card-v2__price-badge small {
  font-size: 11px;
}

.tour-card-v2__body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.tour-card-v2__title {
  font-size: var(--text-lg);
  margin-bottom: 0;
}

.tour-card-v2__subtitle {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.tour-card-v2__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.tour-card-v2__desc p {
  margin-bottom: var(--space-1);
}

.tour-card-v2__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  margin-bottom: var(--space-3);
}

.tour-card-v2__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding-top: var(--space-3);
}

.tour-card-v2__btn {
  padding: 8px 16px;
  font-size: 14px;
}

.tour-card-v2__meta {
  margin-bottom: var(--space-2);
}

.tour-card-v2__pill {
  font-size: var(--text-xs);
  padding: 4px 10px;
}

.blog-content > h2 + .tour-card-v2 {
  margin-top: 12px;
}

/* Mobile: revert to vertical cards */
@media (max-width: 768px) {
  .tour-card-v2 {
    grid-template-columns: 1fr;
  }

  .tour-card-v2__image {
    aspect-ratio: 16 / 10;
    max-height: 220px;
  }

  .tour-card-v2__image-overlay {
    border-radius: 0;
  }

  .tour-card-v2__body {
    padding: 16px;
  }

  .tour-card-v2__desc {
    -webkit-line-clamp: 2;
  }
}