/**
 * TVDTheme - Artistic Editorial / Organic Image Mask Stylesheet
 * Responsive Asymmetric Travel & Editorial Layout System
 * @package TVDTheme
 */

/* ==========================================================================
   1. ORGANIC / BRUSH / INK MASK DEFINITIONS (SVG Data URIs)
   ========================================================================== */

:root {
  /* 1. Brush Rough - Ragged dry brush stroke edge with bristle texture and splatters */
  --tvd-mask-brush-rough: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L760,0 C745,42 778,75 750,118 C732,145 705,162 730,195 C755,228 795,245 770,285 C748,320 690,335 725,375 C752,406 810,418 780,460 C755,495 680,510 715,550 C745,585 805,595 775,640 C750,678 695,695 720,735 C745,775 800,790 770,835 C742,878 698,905 735,950 C755,975 780,985 765,1000 L0,1000 Z'/%3E%3Ccircle cx='830' cy='180' r='18' fill='%23000'/%3E%3Ccircle cx='855' cy='195' r='8' fill='%23000'/%3E%3Ccircle cx='815' cy='360' r='14' fill='%23000'/%3E%3Ccircle cx='845' cy='385' r='20' fill='%23000'/%3E%3Ccircle cx='875' cy='395' r='9' fill='%23000'/%3E%3Ccircle cx='825' cy='535' r='24' fill='%23000'/%3E%3Ccircle cx='860' cy='555' r='12' fill='%23000'/%3E%3Ccircle cx='820' cy='720' r='16' fill='%23000'/%3E%3Ccircle cx='850' cy='740' r='10' fill='%23000'/%3E%3Ccircle cx='810' cy='890' r='22' fill='%23000'/%3E%3Ccircle cx='840' cy='915' r='11' fill='%23000'/%3E%3C/svg%3E");

  /* 2. Brush Ink Bleed - Deep wet ink bleed & organic wash edge */
  --tvd-mask-brush-ink-bleed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L720,0 C740,30 780,50 750,90 C710,140 680,160 740,210 C800,260 760,310 710,350 C660,390 730,440 780,480 C820,510 750,560 700,600 C660,630 720,680 770,720 C810,750 740,800 690,840 C650,870 710,930 750,960 C770,980 740,995 720,1000 L0,1000 Z'/%3E%3Cellipse cx='795' cy='120' rx='28' ry='18' fill='%23000'/%3E%3Cellipse cx='840' cy='230' rx='22' ry='32' fill='%23000'/%3E%3Cellipse cx='815' cy='450' rx='35' ry='22' fill='%23000'/%3E%3Cellipse cx='855' cy='630' rx='25' ry='35' fill='%23000'/%3E%3Cellipse cx='800' cy='820' rx='32' ry='20' fill='%23000'/%3E%3Ccircle cx='845' cy='835' r='12' fill='%23000'/%3E%3C/svg%3E");

  /* 3. Organic Blob - Fluid modern curved shape */
  --tvd-mask-organic-blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L750,0 C850,150 680,280 820,450 C940,600 700,780 800,920 C840,970 780,990 750,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 4. Torn Paper - Ripped deckle edge paper tear */
  --tvd-mask-torn-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L780,0 L760,40 L790,80 L750,130 L785,170 L740,220 L780,270 L755,320 L790,370 L745,420 L780,470 L750,520 L785,570 L740,620 L780,670 L750,720 L785,770 L745,820 L780,870 L750,920 L780,960 L760,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 5. Watercolor Splash - Paint splash with fine fluid droplets */
  --tvd-mask-watercolor-splash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L740,0 C710,50 790,110 750,160 C710,210 690,260 760,310 C830,360 740,430 710,480 C680,530 780,580 750,640 C720,700 700,750 770,810 C830,860 740,930 720,970 L0,1000 Z'/%3E%3Ccircle cx='810' cy='90' r='25' fill='%23000'/%3E%3Ccircle cx='845' cy='115' r='14' fill='%23000'/%3E%3Ccircle cx='825' cy='275' r='28' fill='%23000'/%3E%3Ccircle cx='865' cy='310' r='16' fill='%23000'/%3E%3Ccircle cx='820' cy='520' r='32' fill='%23000'/%3E%3Ccircle cx='870' cy='545' r='18' fill='%23000'/%3E%3Ccircle cx='815' cy='740' r='26' fill='%23000'/%3E%3Ccircle cx='850' cy='765' r='12' fill='%23000'/%3E%3C/svg%3E");

  /* 6. Zen Arch - Elegant organic Asian arch */
  --tvd-mask-zen-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L680,0 C820,120 860,320 860,500 C860,680 820,880 680,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 7. Brush Zen Stroke - Circular Enso sweep & expressive calligraphy */
  --tvd-mask-brush-zen-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L700,0 C780,80 840,200 810,340 C770,500 860,650 830,800 C800,920 740,980 700,1000 L0,1000 Z'/%3E%3Cpath fill='%23000' d='M720,180 C800,240 850,320 830,420 C810,500 780,480 750,440 Z' opacity='0.8'/%3E%3Ccircle cx='860' cy='310' r='16' fill='%23000'/%3E%3Ccircle cx='875' cy='620' r='20' fill='%23000'/%3E%3C/svg%3E");

  /* 8. Ink Cloud - Blooming ink wash / smoke cloud */
  --tvd-mask-ink-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L680,0 C740,60 760,110 710,160 C660,210 750,260 820,320 C890,380 840,460 780,510 C720,560 810,630 840,710 C870,780 800,860 750,910 C710,950 740,980 700,1000 L0,1000 Z'/%3E%3Cellipse cx='850' cy='220' rx='45' ry='30' fill='%23000'/%3E%3Cellipse cx='880' cy='520' rx='35' ry='45' fill='%23000'/%3E%3Ccircle cx='840' cy='820' r='28' fill='%23000'/%3E%3C/svg%3E");

  /* 9. Diagonal Tear - Modern fashion magazine diagonal deckle rip */
  --tvd-mask-diagonal-tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L880,0 L840,90 L860,180 L800,290 L825,380 L765,490 L790,580 L730,690 L755,790 L695,900 L720,950 L680,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 10. Vintage Stamp - Classic postal stamp perforated edges */
  --tvd-mask-vintage-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L800,0 C770,25 770,55 800,80 C770,105 770,135 800,160 C770,185 770,215 800,240 C770,265 770,295 800,320 C770,345 770,375 800,400 C770,425 770,455 800,480 C770,505 770,535 800,560 C770,585 770,615 800,640 C770,665 770,695 800,720 C770,745 770,775 800,800 C770,825 770,855 800,880 C770,905 770,935 800,960 C770,985 770,995 800,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 11. Wavy Fluid - Flowing layered dynamic liquid wave */
  --tvd-mask-wavy-fluid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L720,0 C820,100 660,220 800,350 C920,470 700,580 820,700 C920,810 740,920 780,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 12. Rough Grunge Frame - Weathered distressed border edge */
  --tvd-mask-rough-grunge-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L850,0 C835,30 860,60 840,100 L870,140 C845,190 855,230 830,280 L860,330 C840,380 865,430 835,480 L865,540 C840,590 860,640 835,690 L860,750 C835,800 855,850 830,900 L860,960 C840,985 850,1000 830,1000 L0,1000 Z'/%3E%3Crect x='855' y='60' width='8' height='40' fill='%23000' transform='rotate(15,855,60)'/%3E%3Crect x='845' y='320' width='10' height='50' fill='%23000' transform='rotate(-10,845,320)'/%3E%3Crect x='850' y='620' width='9' height='45' fill='%23000' transform='rotate(12,850,620)'/%3E%3Crect x='845' y='860' width='8' height='35' fill='%23000' transform='rotate(-8,845,860)'/%3E%3C/svg%3E");

  /* 13. Geometric Arch Duo - Dual symmetry architectural arches */
  --tvd-mask-geometric-arch-duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L650,0 C780,0 850,120 850,260 C850,420 750,500 850,640 C850,780 780,1000 650,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 14. Polygon Soft Facet - Organic crystalline gem facet cut */
  --tvd-mask-polygon-soft-facet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L780,0 L850,160 L790,330 L870,500 L790,670 L860,840 L780,1000 L0,1000 Z'/%3E%3C/svg%3E");

  /* 15. Film Strip Rough - Vintage cinematic negative border with sprockets */
  --tvd-mask-film-strip-rough: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L820,0 L810,100 L830,200 L810,300 L830,400 L810,500 L830,600 L810,700 L830,800 L810,900 L820,1000 L0,1000 Z'/%3E%3Crect x='835' y='80' width='32' height='48' rx='6' fill='%23000'/%3E%3Crect x='835' y='240' width='32' height='48' rx='6' fill='%23000'/%3E%3Crect x='835' y='400' width='32' height='48' rx='6' fill='%23000'/%3E%3Crect x='835' y='560' width='32' height='48' rx='6' fill='%23000'/%3E%3Crect x='835' y='720' width='32' height='48' rx='6' fill='%23000'/%3E%3Crect x='835' y='880' width='32' height='48' rx='6' fill='%23000'/%3E%3C/svg%3E");

  /* 16. Paint Drip Organic - Expressive downward paint drippings */
  --tvd-mask-paint-drip-organic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L740,0 C760,60 800,90 770,150 C740,200 750,280 810,330 C860,370 780,430 750,490 C720,550 780,620 830,680 C870,730 770,810 740,880 C720,930 760,970 730,1000 L0,1000 Z'/%3E%3Cpath fill='%23000' d='M750,180 Q850,210 830,280 Q810,320 760,300 Z'/%3E%3Cpath fill='%23000' d='M760,510 Q880,550 860,620 Q830,670 770,640 Z'/%3E%3Ccircle cx='875' cy='650' r='14' fill='%23000'/%3E%3Ccircle cx='890' cy='685' r='8' fill='%23000'/%3E%3Ccircle cx='850' cy='310' r='10' fill='%23000'/%3E%3C/svg%3E");

  /* 17. Liquid Morph - Modern organic fluid morphing blob */
  --tvd-mask-liquid-morph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L660,0 C780,120 880,240 820,420 C760,600 890,720 830,880 C800,940 730,990 660,1000 L0,1000 Z'/%3E%3Ccircle cx='870' cy='320' r='24' fill='%23000'/%3E%3Ccircle cx='890' cy='680' r='18' fill='%23000'/%3E%3C/svg%3E");

  /* 18. Fluid Wave Motion - Flowing continuous liquid wave edge */
  --tvd-mask-fluid-wave-motion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L700,0 C760,100 840,160 840,280 C840,400 700,480 700,600 C700,720 840,800 840,900 C840,960 780,990 700,1000 L0,1000 Z'/%3E%3Cpath fill='%23000' d='M720,280 C780,340 860,390 850,470 C840,550 780,580 720,620 Z' opacity='0.7'/%3E%3C/svg%3E");

  /* 19. Kinetic Slash - Modern editorial dynamic multi-angle cuts */
  --tvd-mask-kinetic-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L820,0 L660,1000 L0,1000 Z'/%3E%3Cpolygon points='840,40 880,40 760,780 720,780' fill='%23000'/%3E%3Cpolygon points='900,100 930,100 830,720 800,720' fill='%23000'/%3E%3C/svg%3E");

  /* 20. Cyber Portal - Minimalist futuristic architectural arch */
  --tvd-mask-cyber-portal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L600,0 C780,0 880,160 880,480 C880,780 780,1000 600,1000 L0,1000 Z'/%3E%3Ccircle cx='890' cy='200' r='16' fill='%23000'/%3E%3Ccircle cx='910' cy='480' r='20' fill='%23000'/%3E%3Ccircle cx='890' cy='760' r='16' fill='%23000'/%3E%3C/svg%3E");

  /* 21. Ink Flow Stream - Organic flowing dynamic ink river */
  --tvd-mask-ink-flow-stream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L720,0 C680,80 760,160 800,240 C850,340 760,420 740,500 C710,600 840,680 810,790 C780,890 700,950 720,1000 L0,1000 Z'/%3E%3Cpath fill='%23000' d='M750,220 C820,260 860,320 830,380 C800,430 760,400 730,350 Z' opacity='0.75'/%3E%3Cellipse cx='850' cy='620' rx='25' ry='40' fill='%23000' transform='rotate(20,850,620)'/%3E%3Ccircle cx='870' cy='220' r='14' fill='%23000'/%3E%3Ccircle cx='860' cy='820' r='18' fill='%23000'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. SECTION WRAPPER & CONTAINER
   ========================================================================== */

.tvd-content-band.is-artistic-editorial {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.tvd-artistic-editorial {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 24px;
  box-sizing: border-box;
}

/* Inner block content placed inside an artistic editorial section */
.tvd-artistic-editorial__inner-content {
  position: relative;
  z-index: 5;
  margin-top: 40px;
}

/* ==========================================================================
   3. ASYMMETRIC EDITORIAL GRID LAYOUT
   ========================================================================== */

.tvd-artistic-editorial__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 50px;
  position: relative;
  z-index: 3;
}

/* Image on Right variant */
.tvd-artistic-editorial.layout-image-right .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
}

.tvd-artistic-editorial.layout-image-right .tvd-artistic-editorial__visual {
  order: 2;
}

.tvd-artistic-editorial.layout-image-right .tvd-artistic-editorial__body {
  order: 1;
}

/* Center Editorial variant */
.tvd-artistic-editorial.layout-image-center .tvd-artistic-editorial__grid {
  grid-template-columns: 1fr;
  text-align: center;
}

/* Grid Ratio Variants */
.tvd-artistic-editorial.ratio-7-5 .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.tvd-artistic-editorial.layout-image-right.ratio-7-5 .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.tvd-artistic-editorial.ratio-5-7 .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.tvd-artistic-editorial.layout-image-right.ratio-5-7 .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.tvd-artistic-editorial.ratio-6-6 .tvd-artistic-editorial__grid {
  grid-template-columns: 1fr 1fr;
}

.tvd-artistic-editorial.ratio-8-4 .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.tvd-artistic-editorial.layout-image-right.ratio-8-4 .tvd-artistic-editorial__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* ==========================================================================
   4. ORGANIC IMAGE MASK STYLING & TRANSFORMS
   ========================================================================== */

.tvd-artistic-editorial__visual {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.tvd-artistic-editorial__mask-frame {
  position: relative;
  width: 100%;
  height: var(--editorial-image-height, 540px);
  overflow: hidden;
  border-radius: var(--editorial-mask-radius, 0px);
  filter: drop-shadow(0 14px 32px rgba(15, 23, 42, 0.08));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Mask application on inner layer */
.tvd-artistic-editorial__mask-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: var(--tvd-current-mask, var(--tvd-mask-brush-rough));
  mask-image: var(--tvd-current-mask, var(--tvd-mask-brush-rough));
  -webkit-mask-size: var(--editorial-mask-size, 100% 100%);
  mask-size: var(--editorial-mask-size, 100% 100%);
  -webkit-mask-position: var(--editorial-mask-pos, center);
  mask-position: var(--editorial-mask-pos, center);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(var(--editorial-mask-scale-x, 1))
             scaleY(var(--editorial-mask-scale-y, 1))
             rotate(var(--editorial-mask-rotate, 0deg))
             scale(var(--editorial-mask-scale, 1));
  filter: blur(var(--editorial-mask-blur, 0px));
  transition: filter 0.3s ease;
}

/* Image element inside the masked container */
.tvd-artistic-editorial__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--editorial-image-pos, center);
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

/* Hover effects */
.tvd-artistic-editorial__visual:hover .tvd-artistic-editorial__img {
  transform: scale(1.04);
}

.tvd-artistic-editorial__visual.hover-brightness:hover .tvd-artistic-editorial__img {
  filter: brightness(1.08) contrast(1.04);
}

.tvd-artistic-editorial__visual.hover-lift:hover .tvd-artistic-editorial__mask-frame {
  transform: translateY(-6px);
  filter: drop-shadow(0 20px 42px rgba(15, 23, 42, 0.14));
}

/* Mask Preset Shape Selectors (16 Organic & Artistic Masks) */
.mask-shape-brush-rough {
  --tvd-current-mask: var(--tvd-mask-brush-rough);
}
.mask-shape-brush-ink-bleed {
  --tvd-current-mask: var(--tvd-mask-brush-ink-bleed);
}
.mask-shape-organic-blob {
  --tvd-current-mask: var(--tvd-mask-organic-blob);
}
.mask-shape-torn-paper {
  --tvd-current-mask: var(--tvd-mask-torn-paper);
}
.mask-shape-watercolor-splash {
  --tvd-current-mask: var(--tvd-mask-watercolor-splash);
}
.mask-shape-zen-arch {
  --tvd-current-mask: var(--tvd-mask-zen-arch);
}
.mask-shape-brush-zen-stroke {
  --tvd-current-mask: var(--tvd-mask-brush-zen-stroke);
}
.mask-shape-ink-cloud {
  --tvd-current-mask: var(--tvd-mask-ink-cloud);
}
.mask-shape-diagonal-tear {
  --tvd-current-mask: var(--tvd-mask-diagonal-tear);
}
.mask-shape-vintage-stamp {
  --tvd-current-mask: var(--tvd-mask-vintage-stamp);
}
.mask-shape-wavy-fluid {
  --tvd-current-mask: var(--tvd-mask-wavy-fluid);
}
.mask-shape-rough-grunge-frame {
  --tvd-current-mask: var(--tvd-mask-rough-grunge-frame);
}
.mask-shape-geometric-arch-duo {
  --tvd-current-mask: var(--tvd-mask-geometric-arch-duo);
}
.mask-shape-polygon-soft-facet {
  --tvd-current-mask: var(--tvd-mask-polygon-soft-facet);
}
.mask-shape-film-strip-rough {
  --tvd-current-mask: var(--tvd-mask-film-strip-rough);
}
.mask-shape-paint-drip-organic {
  --tvd-current-mask: var(--tvd-mask-paint-drip-organic);
}
.mask-shape-liquid-morph {
  --tvd-current-mask: var(--tvd-mask-liquid-morph);
}
.mask-shape-fluid-wave-motion {
  --tvd-current-mask: var(--tvd-mask-fluid-wave-motion);
}
.mask-shape-kinetic-slash {
  --tvd-current-mask: var(--tvd-mask-kinetic-slash);
}
.mask-shape-cyber-portal {
  --tvd-current-mask: var(--tvd-mask-cyber-portal);
}
.mask-shape-ink-flow-stream {
  --tvd-current-mask: var(--tvd-mask-ink-flow-stream);
}

/* Flip Mask Directives */
.mask-flip-horizontal {
  --editorial-mask-scale-x: -1;
}
.mask-flip-vertical {
  --editorial-mask-scale-y: -1;
}
.mask-flip-both {
  --editorial-mask-scale-x: -1;
  --editorial-mask-scale-y: -1;
}

/* Advanced Mask Blend Modes */
.mask-blend-multiply { mix-blend-mode: multiply; }
.mask-blend-screen { mix-blend-mode: screen; }
.mask-blend-overlay { mix-blend-mode: overlay; }
.mask-blend-darken { mix-blend-mode: darken; }
.mask-blend-lighten { mix-blend-mode: lighten; }
.mask-blend-color-dodge { mix-blend-mode: color-dodge; }
.mask-blend-luminosity { mix-blend-mode: luminosity; }

/* Advanced Mask Drop Shadows */
.tvd-artistic-editorial__mask-frame.shadow-none {
  filter: none;
}
.tvd-artistic-editorial__mask-frame.shadow-soft {
  filter: drop-shadow(0 14px 30px var(--editorial-shadow-color, rgba(15, 23, 42, 0.12)));
}
.tvd-artistic-editorial__mask-frame.shadow-deep {
  filter: drop-shadow(0 25px 50px var(--editorial-shadow-color, rgba(15, 23, 42, 0.22)));
}
.tvd-artistic-editorial__mask-frame.shadow-glow {
  filter: drop-shadow(0 0 35px var(--editorial-shadow-color, rgba(234, 179, 8, 0.35)));
}
.tvd-artistic-editorial__mask-frame.shadow-vintage {
  filter: drop-shadow(8px 10px 0px var(--editorial-shadow-color, rgba(15, 23, 42, 0.18)));
}

/* Advanced Mask Border / Outline Simulated Stroke */
.tvd-artistic-editorial__mask-frame.border-stroke-solid {
  outline: 3px solid var(--editorial-border-color, #0f172a);
  outline-offset: -3px;
}
.tvd-artistic-editorial__mask-frame.border-stroke-dashed {
  outline: 2px dashed var(--editorial-border-color, #0f172a);
  outline-offset: -2px;
}
.tvd-artistic-editorial__mask-frame.border-stroke-glow {
  box-shadow: inset 0 0 25px var(--editorial-border-color, rgba(52, 211, 153, 0.45));
}

/* Advanced Image Filters */
.filter-warm-travel .tvd-artistic-editorial__img {
  filter: sepia(0.18) saturate(1.22) contrast(1.06);
}
.filter-cool-nordic .tvd-artistic-editorial__img {
  filter: hue-rotate(170deg) saturate(0.88) contrast(1.08);
}
.filter-vintage-film .tvd-artistic-editorial__img {
  filter: sepia(0.32) contrast(1.12) brightness(0.96);
}
.filter-black-white .tvd-artistic-editorial__img {
  filter: grayscale(1) contrast(1.2) brightness(1.02);
}
.filter-cinematic .tvd-artistic-editorial__img {
  filter: contrast(1.25) saturate(1.18) brightness(0.98);
}

/* Image Parallax / Subtle Living Motion */
.parallax-subtle-float {
  animation: tvdEditorialFloat 7s ease-in-out infinite alternate;
}
.parallax-gentle-zoom .tvd-artistic-editorial__img {
  animation: tvdEditorialZoom 12s ease-in-out infinite alternate;
}

@keyframes tvdEditorialFloat {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-12px); }
}

@keyframes tvdEditorialZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Animated Modern Mask Living Motions */
@keyframes tvdMorphBlob {
  0%   { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) rotate(var(--editorial-mask-rotate, 0deg)) scale(var(--editorial-mask-scale, 1)) translate(0, 0); }
  33%  { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) rotate(calc(var(--editorial-mask-rotate, 0deg) + 2deg)) scale(calc(var(--editorial-mask-scale, 1) * 1.03)) translate(-6px, -4px); }
  66%  { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) rotate(calc(var(--editorial-mask-rotate, 0deg) - 2deg)) scale(calc(var(--editorial-mask-scale, 1) * 0.98)) translate(4px, -8px); }
  100% { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) rotate(var(--editorial-mask-rotate, 0deg)) scale(var(--editorial-mask-scale, 1)) translate(0, 0); }
}

@keyframes tvdMaskWaveFlow {
  0%   { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(0px) scale(var(--editorial-mask-scale, 1)); }
  50%  { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(-16px) scale(calc(var(--editorial-mask-scale, 1) * 1.02)); }
  100% { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(0px) scale(var(--editorial-mask-scale, 1)); }
}

@keyframes tvdKineticShift {
  0%   { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(0px) skewX(0deg); }
  50%  { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(-10px) skewX(-1.5deg); }
  100% { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(0px) skewX(0deg); }
}

@keyframes tvdPortalBreathe {
  0%, 100% { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) scale(var(--editorial-mask-scale, 1)); filter: drop-shadow(0 10px 30px rgba(15, 23, 42, 0.12)); }
  50%      { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) scale(calc(var(--editorial-mask-scale, 1) * 1.025)); filter: drop-shadow(0 15px 45px rgba(56, 189, 248, 0.35)); }
}

@keyframes tvdInkStreamPulse {
  0%, 100% { transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(0px) scale(var(--editorial-mask-scale, 1)); }
  50%      { transform: scaleX(calc(var(--editorial-mask-scale-x, 1) * 1.02)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(-8px) scale(calc(var(--editorial-mask-scale, 1) * 1.015)); }
}

/* Mask Animation Control Classes */
.mask-anim-morph,
.mask-anim-auto.mask-shape-liquid-morph {
  animation: tvdMorphBlob 8s ease-in-out infinite alternate;
}

.mask-anim-wave,
.mask-anim-auto.mask-shape-fluid-wave-motion {
  animation: tvdMaskWaveFlow 7s ease-in-out infinite alternate;
}

.mask-anim-kinetic,
.mask-anim-auto.mask-shape-kinetic-slash {
  animation: tvdKineticShift 6s ease-in-out infinite alternate;
}

.mask-anim-portal,
.mask-anim-auto.mask-shape-cyber-portal {
  animation: tvdPortalBreathe 6s ease-in-out infinite;
}

.mask-anim-stream,
.mask-anim-auto.mask-shape-ink-flow-stream {
  animation: tvdInkStreamPulse 8s ease-in-out infinite alternate;
}

.mask-anim-float {
  animation: tvdEditorialFloat 7s ease-in-out infinite alternate;
}

.mask-anim-pulse {
  animation: tvdPortalBreathe 6s ease-in-out infinite;
}

.mask-anim-none {
  animation: none !important;
}

/* Modern Hover States */
.mask-shape-kinetic-slash {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tvd-artistic-editorial__visual:hover .mask-shape-kinetic-slash {
  transform: scaleX(var(--editorial-mask-scale-x, 1)) scaleY(var(--editorial-mask-scale-y, 1)) translateY(-6px) skewX(-2deg) scale(1.02);
}

.mask-shape-cyber-portal {
  transition: filter 0.5s ease;
}
.tvd-artistic-editorial__visual:hover .mask-shape-cyber-portal {
  filter: drop-shadow(0 20px 50px rgba(56, 189, 248, 0.45));
}

/* Image Overlay Gradient / Tint */
.tvd-artistic-editorial__img-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--editorial-image-overlay, transparent);
  opacity: var(--editorial-image-overlay-opacity, 0);
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* ==========================================================================
   5. EDITORIAL BODY & ASYMMETRIC TYPOGRAPHY
   ========================================================================== */

.tvd-artistic-editorial__body {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 5.1 Eyebrow / Kicker Category */
.tvd-editorial-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--editorial-eyebrow-color, #334155);
  margin-bottom: -4px;
}

.tvd-editorial-eyebrow::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}

/* Eyebrow Style Variants */
.tvd-editorial-eyebrow.eyebrow-style-pill {
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.tvd-editorial-eyebrow.eyebrow-style-pill::after {
  display: none;
}

.tvd-editorial-eyebrow.eyebrow-style-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tvd-editorial-eyebrow.eyebrow-style-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--editorial-accent-color, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: tvdEyebrowPulse 2s infinite ease-in-out;
}
.tvd-editorial-eyebrow.eyebrow-style-dot::after {
  display: none;
}

@keyframes tvdEyebrowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* Location Metadata Tag */
.tvd-editorial-meta-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--editorial-accent-color, #0f172a);
  background: rgba(15, 23, 42, 0.05);
  padding: 4px 12px;
  border-radius: 6px;
  width: fit-content;
}

/* 5.2 Header Stage: Title + Vertical Badges Stack */
.tvd-editorial-header-stage {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

/* Main Artistic Headline */
.tvd-editorial-title {
  margin: 0;
  line-height: 0.96;
  font-weight: 900;
  color: var(--editorial-title-color, #0f172a);
  font-size: var(--editorial-title-size, clamp(38px, 4.8vw, 68px));
  letter-spacing: -0.02em;
  word-break: break-word;
}

/* Style: Brush Calligraphy / Thư Pháp (Like Tam Đảo reference) */
.tvd-editorial-title--brush {
  font-family: "SVN-Brush", "UTM ThuPhap", "Caveat", "Dancing Script", "Segoe Print", cursive, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.08), -1px -1px 0px rgba(255, 255, 255, 0.6);
  position: relative;
}

/* Style: Editorial High-Fashion Serif */
.tvd-editorial-title--serif {
  font-family: "Playfair Display", "Didot", "Cinzel", "Georgia", serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Style: Modern Bold Sans */
.tvd-editorial-title--sans {
  font-family: var(--tvd-font-heading, "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Style: Outline / Viền nét rỗng */
.tvd-editorial-title--outline {
  font-family: var(--tvd-font-heading, "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 900;
  text-transform: uppercase;
  color: transparent !important;
  -webkit-text-stroke: 2px var(--editorial-title-color, #0f172a);
  letter-spacing: 0.03em;
}

/* Style: Gradient Gold */
.tvd-editorial-title--gradient-gold {
  font-family: "Playfair Display", "Didot", serif;
  font-weight: 800;
  background: linear-gradient(135deg, #b45309 0%, #fbbf24 45%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Style: Gradient Emerald */
.tvd-editorial-title--gradient-emerald {
  font-family: var(--tvd-font-heading, "Montserrat", sans-serif);
  font-weight: 900;
  background: linear-gradient(135deg, #047857 0%, #34d399 50%, #065f46 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Style: Gradient Sunset */
.tvd-editorial-title--gradient-sunset {
  font-family: "Playfair Display", "Didot", serif;
  font-weight: 800;
  background: linear-gradient(135deg, #e11d48 0%, #f97316 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Style: Gradient Ocean */
.tvd-editorial-title--gradient-ocean {
  font-family: var(--tvd-font-heading, "Montserrat", sans-serif);
  font-weight: 900;
  background: linear-gradient(135deg, #0369a1 0%, #38bdf8 50%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 5.3 Vertical Circle Badges / Con Dấu Tròn Đỏ */
.tvd-editorial-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 4px;
}

.tvd-editorial-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--editorial-badge-bg, #b91c1c);
  color: var(--editorial-badge-color, #ffffff);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  user-select: none;
}

.tvd-editorial-badge:hover {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 6px 16px rgba(185, 28, 28, 0.4);
}

/* Badge Layout Variations */
.tvd-editorial-badges.layout-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.tvd-editorial-badges.shape-pill .tvd-editorial-badge {
  width: auto;
  min-width: 38px;
  height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  font-size: 12px;
}

.tvd-editorial-badges.shape-stamp .tvd-editorial-badge {
  border-radius: 6px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
}

.tvd-editorial-badges.shape-hexagon .tvd-editorial-badge {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 10px rgba(185, 28, 28, 0.3));
}

/* 5.4 Story & Subtitle Block */
.tvd-editorial-story {
  position: relative;
  padding-left: 20px;
  margin-top: 6px;
}

.tvd-editorial-story.has-accent-border {
  border-left: 3px solid var(--editorial-accent-color, #0f172a);
}

.tvd-editorial-story.desc-backdrop-glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 18px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.tvd-editorial-story.desc-backdrop-card {
  background: #ffffff;
  padding: 20px 26px;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.tvd-editorial-subtitle {
  font-size: 20px;
  font-weight: 800;
  color: var(--editorial-subtitle-color, #0f172a);
  margin: 0 0 10px;
  line-height: 1.25;
}

.tvd-editorial-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--editorial-desc-color, #475569);
  margin: 0;
}

/* 5.5 Footer Actions & Bottom Stamp */
.tvd-editorial-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
  padding-top: 14px;
}

/* CTA Button */
.tvd-editorial-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  background: var(--editorial-btn-bg, #0f172a);
  color: var(--editorial-btn-color, #ffffff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tvd-editorial-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  color: #ffffff;
}

.tvd-editorial-btn.style-outline {
  background: transparent;
  color: var(--editorial-btn-bg, #0f172a);
  border: 2px solid currentColor;
  box-shadow: none;
}

.tvd-editorial-btn.style-outline:hover {
  background: var(--editorial-btn-bg, #0f172a);
  color: #ffffff;
}

/* Audio / Video Play Preview Button */
.tvd-editorial-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 8px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--editorial-title-color, #0f172a);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: all 0.3s ease;
}

.tvd-editorial-play-btn:hover {
  background: rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  color: var(--editorial-title-color, #0f172a);
}

.tvd-editorial-play-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--editorial-btn-bg, #0f172a);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  font-size: 11px;
}

/* Footer Editorial Stamp / Logo */
.tvd-editorial-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.04);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ==========================================================================
   6. BOTANICAL & NATURAL DECORATIVE ACCENTS (Bamboo & Ink Wash)
   ========================================================================== */

.tvd-editorial-decor {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
}

/* Bamboo Foliage Top-Right & Top-Left (Reference design matching) */
.tvd-editorial-decor--bamboo-tr {
  top: -10px;
  right: -10px;
  width: 170px;
  height: 170px;
  color: #2e5a27;
}

.tvd-editorial-decor--bamboo-tl {
  top: -10px;
  left: -10px;
  width: 140px;
  height: 140px;
  color: #3b6e34;
}

/* Ginkgo Biloba Foliage */
.tvd-editorial-decor--ginkgo-tr {
  top: -10px;
  right: -10px;
  width: 150px;
  height: 150px;
  color: #d97706;
}

.tvd-editorial-decor--ginkgo-tl {
  top: -10px;
  left: -10px;
  width: 130px;
  height: 130px;
  color: #d97706;
}

/* Lotus Blossom Line Art */
.tvd-editorial-decor--lotus-tr {
  top: -15px;
  right: -15px;
  width: 160px;
  height: 160px;
  color: #e11d48;
}

.tvd-editorial-decor--lotus-tl {
  top: -15px;
  left: -15px;
  width: 140px;
  height: 140px;
  color: #e11d48;
}

/* Compass & Astrolabe Navigation */
.tvd-editorial-decor--compass-tr {
  top: -10px;
  right: -10px;
  width: 130px;
  height: 130px;
  color: #0284c7;
}

.tvd-editorial-decor--compass-tl {
  top: -10px;
  left: -10px;
  width: 110px;
  height: 110px;
  color: #0284c7;
}

/* Oriental Cloud Swirl */
.tvd-editorial-decor--cloud-tr {
  top: -5px;
  right: -10px;
  width: 160px;
  height: 120px;
  color: #64748b;
  opacity: 0.6;
}

.tvd-editorial-decor--cloud-tl {
  top: -5px;
  left: -10px;
  width: 140px;
  height: 100px;
  color: #64748b;
  opacity: 0.6;
}

/* Topographic Contour Watermark */
.tvd-editorial-decor--topographic {
  bottom: -20px;
  right: -20px;
  width: 240px;
  height: 240px;
  color: #0f172a;
  opacity: 0.15;
}

/* Expressive Ink Splatters */
.tvd-editorial-decor--ink-splatter {
  top: 10px;
  right: 15px;
  width: 140px;
  height: 140px;
  color: #0f172a;
  opacity: 0.45;
}

/* ==========================================================================
   7. DARK MODE SUPPORT
   ========================================================================== */

.tvd-content-band.dark .tvd-artistic-editorial {
  --editorial-eyebrow-color: #94a3b8;
  --editorial-title-color: #f8fafc;
  --editorial-subtitle-color: #f1f5f9;
  --editorial-desc-color: #cbd5e1;
  --editorial-accent-color: #38bdf8;
  --editorial-btn-bg: #38bdf8;
  --editorial-btn-color: #0f172a;
}

.tvd-content-band.dark .tvd-editorial-stamp {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.15);
}

.tvd-content-band.dark .tvd-editorial-decor--bamboo-tr,
.tvd-content-band.dark .tvd-editorial-decor--bamboo-tl {
  color: #4ade80;
  opacity: 0.65;
}

.tvd-content-band.dark .tvd-editorial-decor--ginkgo-tr,
.tvd-content-band.dark .tvd-editorial-decor--ginkgo-tl {
  color: #fbbf24;
  opacity: 0.7;
}

.tvd-content-band.dark .tvd-editorial-decor--lotus-tr,
.tvd-content-band.dark .tvd-editorial-decor--lotus-tl {
  color: #fb7185;
  opacity: 0.7;
}

.tvd-content-band.dark .tvd-editorial-decor--compass-tr,
.tvd-content-band.dark .tvd-editorial-decor--compass-tl {
  color: #38bdf8;
  opacity: 0.7;
}

.tvd-content-band.dark .tvd-editorial-decor--cloud-tr,
.tvd-content-band.dark .tvd-editorial-decor--cloud-tl {
  color: #94a3b8;
  opacity: 0.5;
}

.tvd-content-band.dark .tvd-editorial-decor--topographic {
  color: #ffffff;
  opacity: 0.08;
}

.tvd-content-band.dark .tvd-editorial-decor--ink-splatter {
  color: #ffffff;
  opacity: 0.25;
}

.tvd-content-band.dark .tvd-editorial-story.desc-backdrop-glass {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
}

.tvd-content-band.dark .tvd-editorial-story.desc-backdrop-card {
  background: #1e293b;
  border-left-color: var(--editorial-accent-color, #38bdf8);
}

.tvd-content-band.dark .tvd-editorial-play-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.tvd-content-band.dark .tvd-editorial-meta-location {
  background: rgba(255, 255, 255, 0.08);
  color: #38bdf8;
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
   ========================================================================== */

/* Tablet (max-width: 1023px) */
@media (max-width: 1023px) {
  .tvd-artistic-editorial__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .tvd-artistic-editorial__mask-frame {
    height: var(--editorial-image-height--md, var(--editorial-image-height, 400px)) !important;
  }

  .tvd-editorial-title {
    font-size: var(--editorial-title-size--md, clamp(32px, 4vw, 52px));
  }

  .tvd-editorial-badge {
    width: 38px;
    height: 38px;
    font-size: 11px;
  }

  .tvd-editorial-decor--bamboo-tr {
    width: 120px;
    height: 120px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .tvd-artistic-editorial {
    padding: 16px 12px;
  }

  .tvd-artistic-editorial__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .tvd-artistic-editorial.layout-image-right .tvd-artistic-editorial__visual {
    order: 1;
  }

  .tvd-artistic-editorial.layout-image-right .tvd-artistic-editorial__body {
    order: 2;
  }

  .tvd-artistic-editorial__mask-frame {
    height: var(--editorial-image-height--sm, 300px) !important;
  }

  .tvd-editorial-header-stage {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .tvd-editorial-title {
    font-size: var(--editorial-title-size--sm, clamp(28px, 7.5vw, 42px));
  }

  .tvd-editorial-badges {
    flex-direction: column;
    gap: 6px;
  }

  .tvd-editorial-badge {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }

  .tvd-editorial-story {
    padding-left: 14px;
  }

  .tvd-editorial-subtitle {
    font-size: 18px;
  }

  .tvd-editorial-desc {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .tvd-editorial-decor--bamboo-tr {
    width: 90px;
    height: 90px;
  }

  .tvd-editorial-decor--bamboo-tl {
    width: 80px;
    height: 80px;
  }
}

/* ==========================================================================
   9. BUILDWEB EDITOR CANVAS OVERRIDES (AngularJS Live Editor)
   ========================================================================== */

.editor-canvas .tvd-artistic-editorial {
  pointer-events: auto;
}

.editor-canvas .tvd-editorial-title[contenteditable="true"] {
  outline: none;
}