/* ==========================================================================
   Armenia Travel hero (45-armenia-travel) — reproduced from
   design-library 2/collections/45-armenia-travel/mirror/index.html
   HTML/CSS is copied verbatim from the source. Only:
   - font url() paths point to ./fonts/
   - global rules (.h2, .p, .pS, .font-soundscape, etc.) are scoped under
     .armenia-hero to avoid colliding with the host page's typography
   - two display overrides (.ah-slider-inner-container bottom, .ah-info-container
     transform) replace the SSR hidden state that JS normally resolves
   ========================================================================== */

@font-face { font-family: ping; src: url("./fonts/302b54a675063d38-s.p.woff2") format("woff2"); font-display: swap; font-weight: 400; font-style: normal; }
@font-face { font-family: ping; src: url("./fonts/a5bc60fd770bb694-s.p.woff2") format("woff2"); font-display: swap; font-weight: 500; font-style: normal; }
@font-face { font-family: ping; src: url("./fonts/fd63ba4a2b054c2e-s.p.woff2") format("woff2"); font-display: swap; font-weight: 600; font-style: normal; }
@font-face { font-family: ping; src: url("./fonts/fbedef748a8e1e3e-s.p.woff2") format("woff2"); font-display: swap; font-weight: 700; font-style: normal; }
@font-face { font-family: "ping Fallback"; src: local("Arial"); ascent-override: 86.39%; descent-override: 23.08%; line-gap-override: 0%; size-adjust: 109.62%; }
@font-face { font-family: helvetica; src: url("./fonts/6ddb72a6df5bac49-s.woff2") format("woff2"); font-display: swap; font-weight: 400; font-style: normal; }
@font-face { font-family: helvetica; src: url("./fonts/8531eb51b63c027e-s.woff2") format("woff2"); font-display: swap; font-weight: 600; font-style: normal; }
@font-face { font-family: "helvetica Fallback"; src: local("Arial"); ascent-override: 77%; descent-override: 23%; line-gap-override: 0%; size-adjust: 100%; }
@font-face { font-family: soundscape; src: url("./fonts/a1de2010a25c24bf-s.woff2") format("woff2"); font-display: swap; font-weight: 400; font-style: normal; }
@font-face { font-family: "soundscape Fallback"; src: local("Arial"); ascent-override: 73.96%; descent-override: 19.76%; line-gap-override: 15.62%; size-adjust: 128.04%; }

/* ===== Variables (Armenia design tokens) — added to :root, distinct names so they don't conflict with host page ===== */
:root{--primaryColor1:#15233B;--primaryColor2:#F59C00;--primaryColor3:#ffffff;--secondaryColor1:#F8F8F8;--secondaryColor2:#7B7F86;--secondaryColor3:#FFE173;--secondaryColor4:#EAEAEA;--secondaryColor5:#FF6E73;--bgBigStone:#15233B;--bgApricot:#F59C00;--bgCobalt:#17428A;--bgYellowTan:#FFE173;--bgBrightMaroon:#C8264C;--bgGreenPea:#1E5F4B;--bgWineBerry:#5C293C;--bgMalibu:#6EC8F0;--bgBlackPearl:#0D1522;--bgPurpleHaze:#413278;--bgCowBoy:#6E3C37;--bgBegonia:#FF6E73;--bgPearl:#F8F8F8;--bgLayer:linear-gradient(0,#14233c00 0%,#080e1766 100%);--ping:'ping','ping Fallback';--helvetica:'helvetica','helvetica Fallback';--soundscape:'soundscape','soundscape Fallback';--spSize:8px;--sp0-5x:calc(var(--spSize) * 0.5);--sp1-5x:calc(var(--spSize) * 1.5);--sp1x:calc(var(--spSize) * 1);--sp2x:calc(var(--spSize) * 2);--sp3x:calc(var(--spSize) * 3);--sp4x:calc(var(--spSize) * 4);--sp5x:calc(var(--spSize) * 5);--sp6x:calc(var(--spSize) * 6);--sp7x:calc(var(--spSize) * 7);--sp8x:calc(var(--spSize) * 8);--sp9x:calc(var(--spSize) * 9);--sp10x:calc(var(--spSize) * 10);--sp11x:calc(var(--spSize) * 11);--sp12x:calc(var(--spSize) * 12);--sp13x:calc(var(--spSize) * 13);--sp14x:calc(var(--spSize) * 14);--sp15x:calc(var(--spSize) * 15);--trTime:0.3s;--lineHeight:1.6;--lineHeightS:1.3;}

/* ===== Scoped typography (kept inside .armenia-hero so other sections aren't affected)
   Values copied verbatim from mirror :root rules per viewport, just re-scoped. ===== */
.armenia-hero{--h2:80px;--p:24px;--pS:20px;}
@media only screen and (min-width:1510px) and (max-width:1919px){.armenia-hero{--h2:64px;--p:18px;--pS:16px;}}
@media only screen and (min-width:1440px) and (max-width:1509px){.armenia-hero{--h2:48px;--p:18px;--pS:14px;}}
@media only screen and (min-width:1280px) and (max-width:1439px){.armenia-hero{--h2:48px;--p:18px;--pS:14px;}}
@media only screen and (min-width:1024px) and (max-width:1279px){.armenia-hero{--h2:40px;--p:18px;--pS:14px;}}
@media only screen and (min-width:768px) and (max-width:1023px){.armenia-hero{--h2:32px;--p:16px;--pS:14px;}}
@media only screen and (max-width:767px){.armenia-hero{--h2:32px;--p:14px;--pS:14px;}}

.armenia-hero .h2,.armenia-hero h2{font-size:var(--h2);line-height:var(--lineHeightS);font-weight:unset;}
.armenia-hero .p,.armenia-hero p{font-size:var(--p);line-height:var(--lineHeight);font-weight:unset;}
.armenia-hero .p.pS,.armenia-hero p.pS{--p:var(--pS);}
.armenia-hero .pS,.armenia-hero p.pS{--p:var(--pS);}

.armenia-hero .font-soundscape{font-family:var(--soundscape);}
.armenia-hero .font-helvetica{font-family:var(--helvetica);font-weight:400 !important;}
.armenia-hero .font-ping{font-family:var(--ping);}
.armenia-hero .font-ping-bolder{font-family:var(--ping);font-weight:700 !important;}

/* Subtitle override: comfortable reading size + wider column so JP lines aren't broken awkwardly */
.armenia-hero .ah-subtitle{font-size:17px !important;line-height:1.85 !important;letter-spacing:0.02em;font-weight:700 !important;}
@media (min-width:1440px){.armenia-hero .ah-subtitle{font-size:18px !important;}}
@media (max-width:767px){.armenia-hero .ah-subtitle{font-size:15px !important;line-height:1.85 !important;}}

/* Title override: scale down for Japanese characters and tighten line-height */
.armenia-hero .ah-title{font-size:40px !important;line-height:1.4 !important;letter-spacing:0.02em;}
@media (min-width:1440px){.armenia-hero .ah-title{font-size:44px !important;}}
@media (min-width:1920px){.armenia-hero .ah-title{font-size:52px !important;}}
@media (max-width:1023px){.armenia-hero .ah-title{font-size:32px !important;line-height:1.45 !important;}}
@media (max-width:767px){.armenia-hero .ah-title{font-size:26px !important;line-height:1.5 !important;}}

/* Widen the subtitle column so two-line Japanese copy fits cleanly */
.armenia-hero.hyXUOk{--ahSubtitleWidth:30% !important;}
@media (min-width:1920px){.armenia-hero.hyXUOk{--ahSubtitleWidth:26% !important;}}
@media (max-width:1023px){.armenia-hero.hyXUOk{--ahSubtitleWidth:45% !important;}}
@media (max-width:767px){.armenia-hero.hyXUOk{--ahSubtitleWidth:100% !important;}}

@-webkit-keyframes opacityAnimation{from{opacity:0;}to{opacity:1;}}
@keyframes opacityAnimation{from{opacity:0;}to{opacity:1;}}

/* ===== hyXUOk — hero container (verbatim) ===== */
.hyXUOk{--longTrTime:calc(3 * var(--trTime));--ahSliderProportion:50.78%;--isPaginationSize:var(--sp1x);--isPaginationTranslate:50%;--ahInfoPaddingV:var(--sp7x);--ahInfoPaddingH:var(--sp8x);--ahSubtitleWidth:22.2%;--ahInfoMarginRight:var(--sp15x);--isPaginationRightPosition:var(--ahInfoPaddingH);position:relative;width:100%;padding-top:var(--ahSliderProportion);overflow:hidden;}
.hyXUOk .ah-slider-container{height:100%;}
.hyXUOk .ah-slider-container .ah-slider-inner-container{position:absolute;top:0;left:0;bottom:100%;width:100%;overflow:hidden;z-index:1;}
.hyXUOk .ah-slider-container .ah-slider-inner-container .ah-layer{position:absolute;top:0;left:0;right:0;bottom:0;}
.hyXUOk .ah-slider-container .ah-slider-inner-container .transparent-layer{position:absolute;top:0;left:0;width:100%;height:30%;background:var(--bgLayer);z-index:2;}
.hyXUOk .ah-slider-container .ah-slider-inner-container .ah-layer{z-index:5;}
.hyXUOk .ah-slider-container .ah-slider-inner-container .ah-slide{width:100%;height:100%;position:absolute;top:0;left:0;right:0;opacity:0;-webkit-transition:opacity var(--longTrTime);transition:opacity var(--longTrTime);}
.hyXUOk .ah-slider-container .ah-slider-inner-container .ah-slide.active{opacity:1;}
.hyXUOk .ah-slider-container .ah-slider-inner-container .ah-slide .videoCont,.hyXUOk .ah-slider-container .ah-slider-inner-container .ah-slide .imageCont{position:absolute;top:0;left:0;right:0;bottom:0;}
.hyXUOk .ah-slider-container .pagination-container{display:flex;flex-direction:column;position:absolute;bottom:50%;right:var(--isPaginationRightPosition);transform:translateY(var(--isPaginationTranslate));z-index:10;}
.hyXUOk .ah-slider-container .pagination-container .pagination-item{display:inline-block;width:var(--isPaginationSize);height:var(--isPaginationSize);background:var(--primaryColor3);border-radius:calc(var(--isPaginationSize) / 2);transition:var(--trTime);cursor:pointer;}
.hyXUOk .ah-slider-container .pagination-container .pagination-item.active{height:calc(2.5 * var(--isPaginationSize));cursor:none;}
.hyXUOk .ah-slider-container .pagination-container .pagination-item:not(:last-child){margin-bottom:var(--isPaginationSize);}
.hyXUOk .ah-info-container{display:flex;align-items:center;position:absolute;bottom:0;left:0;right:0;padding:var(--ahInfoPaddingV) var(--ahInfoPaddingH);transition:color var(--longTrTime);transform:translateY(100%);z-index:1;pointer-events:none;}
.hyXUOk .ah-info-container .ah-info-inner-container{display:flex;align-items:start;width:100%;flex:1;opacity:0;animation:opacityAnimation var(--longTrTime) forwards;margin-right:var(--ahInfoMarginRight);}
.hyXUOk .ah-info-container .ah-info-inner-container .ah-title{flex:1;padding-right:var(--sp3x);}
.hyXUOk .ah-info-container .ah-info-inner-container .ah-subtitle{width:var(--ahSubtitleWidth);}
.hyXUOk .ah-info-container .scroll-animation-container{display:flex;flex-direction:column;align-items:center;}
.hyXUOk .ah-info-container .scroll-animation-container .scroll-text{writing-mode:tb-rl;color:var(--bgGreenPea);margin-bottom:var(--sp2x);transition:color var(--longTrTime);line-height:1.5;}
.hyXUOk .ah-info-container.light .scroll-text{color:var(--secondaryColor1);}

@media only screen and (min-width:1920px) and (max-width:2559px){.hyXUOk{--ahSliderProportion:58.52%;--ahInfoPaddingV:var(--sp7x);--ahInfoPaddingH:var(--sp6x);--ahSubtitleWidth:22%;--ahInfoMarginRight:var(--sp11x);}}
@media only screen and (min-width:1510px) and (max-width:1919px){.hyXUOk{--ahSliderProportion:57.28%;--ahInfoPaddingV:var(--sp5x);--ahInfoPaddingH:var(--sp5x);--ahSubtitleWidth:22.15%;--ahInfoMarginRight:var(--sp8x);}}
@media only screen and (min-width:1440px) and (max-width:1509px){.hyXUOk{--ahSliderProportion:47.63%;--ahInfoPaddingV:var(--sp4x);--ahInfoPaddingH:var(--sp5x);--ahSubtitleWidth:22.15%;--ahInfoMarginRight:var(--sp8x);}}
@media only screen and (min-width:1280px) and (max-width:1439px){.hyXUOk{--ahSliderProportion:59.375%;--ahInfoPaddingV:var(--sp4x);--ahInfoPaddingH:var(--sp4x);--ahSubtitleWidth:33.97%;--ahInfoMarginRight:var(--sp7x);}}
@media only screen and (min-width:1024px) and (max-width:1279px){.hyXUOk{--ahSliderProportion:64.218%;--ahInfoPaddingV:var(--sp4x);--ahInfoPaddingH:var(--sp4x);--ahSubtitleWidth:33.87%;--ahInfoMarginRight:var(--sp5x);}}
@media only screen and (min-width:768px) and (max-width:1023px){.hyXUOk{--ahSliderProportion:113.463%;--ahInfoPaddingV:var(--sp4x);--ahInfoPaddingH:var(--sp3x);--ahSubtitleWidth:45.7%;--ahInfoMarginRight:var(--sp3x);}}
@media only screen and (orientation:landscape) and (min-width:768px) and (max-width:1023px){.hyXUOk{--ahSliderProportion:47.63%;--ahInfoPaddingV:var(--sp2x);--ahInfoPaddingH:var(--sp2x);--ahSubtitleWidth:40.87%;--ahInfoMarginRight:var(--sp3x);}}
@media only screen and (max-width:767px){.hyXUOk{--ahSliderProportion:128.425%;--ahInfoPaddingV:var(--sp4x);--ahInfoPaddingH:var(--sp3x);--ahSubtitleWidth:100%;--ahInfoMarginRight:var(--sp3x);}.hyXUOk .ah-info-container{align-items:flex-end;}.hyXUOk .ah-info-container .ah-info-inner-container{flex-direction:column;}.hyXUOk .ah-info-container .ah-info-inner-container .ah-title{margin-bottom:var(--sp3x);}}

/* ===== hbOVDX — ah-info-container container (verbatim) ===== */
.hbOVDX{width:100%;margin:0 auto;}
.hbOVDX:not(.full){width:100%;padding-left:var(--contPaddingH);padding-right:var(--contPaddingH);}
.hbOVDX.full{padding-left:0;padding-right:0;}

/* ===== hSZZso — image/video container (verbatim, only imageCont matters here) ===== */
.fkhAug.imageCont{position:relative;width:100%;padding-top:var(--imagePaddingTop);transition:background-color 0.3s ease-out;}
.fkhAug.imageCont > span{position:absolute;top:0;left:0;object-position:center;width:100%;height:100%;z-index:1;box-sizing:border-box;display:block;overflow:hidden;background:none;opacity:1;border:0;margin:0;padding:0;bottom:0;right:0;transition:opacity 0.8s ease-out;}
.fkhAug.imageCont > span img{transition:opacity 0.7s ease-out,transform var(--trTime) ease-out;}

/* ===== Static-state overrides — values measured from mirror getComputedStyle =====
   The original site uses JS to set inline styles on .ah-slider-inner-container:
     bottom: 132px; border-radius: 0 0 152px 152px;
   …which lifts the photo so the info container sits in the cream band below
   while the photo's lower edge is rounded into the cream. Static reproduction
   mirrors those exact values, with proportional fallbacks for other viewports.   */
.armenia-hero.hyXUOk{background:var(--secondaryColor1);color:var(--primaryColor1);}
.armenia-hero.hyXUOk .ah-slider-container .ah-slider-inner-container{top:0 !important;bottom:132px !important;border-radius:0 0 152px 152px;}
.armenia-hero.hyXUOk .ah-info-container{transform:none !important;color:var(--primaryColor1);}
.armenia-hero.hyXUOk .ah-info-container .ah-info-inner-container{opacity:1 !important;}
@media only screen and (min-width:1920px) and (max-width:2559px){.armenia-hero.hyXUOk .ah-slider-container .ah-slider-inner-container{bottom:176px !important;border-radius:0 0 200px 200px;}}
@media only screen and (min-width:1510px) and (max-width:1919px){.armenia-hero.hyXUOk .ah-slider-container .ah-slider-inner-container{bottom:152px !important;border-radius:0 0 176px 176px;}}
@media only screen and (min-width:1024px) and (max-width:1279px){.armenia-hero.hyXUOk .ah-slider-container .ah-slider-inner-container{bottom:112px !important;border-radius:0 0 128px 128px;}}
@media only screen and (min-width:768px) and (max-width:1023px){.armenia-hero.hyXUOk .ah-slider-container .ah-slider-inner-container{bottom:96px !important;border-radius:0 0 96px 96px;}}
@media only screen and (max-width:767px){.armenia-hero.hyXUOk .ah-slider-container .ah-slider-inner-container{bottom:80px !important;border-radius:0 0 64px 64px;}}

/* ===== Smooth crossfade (3s ease-in-out) — overrides original 0.9s opacity ===== */
.armenia-hero .ah-slide{transition:opacity 3s ease-in-out !important;}

/* ===== Ken Burns: always running on every slide so motion never stops mid-transition.
   Different delays per slide so the moment of fade doesn't coincide with a turnaround. ===== */
.armenia-hero .ah-slide img{will-change:transform;animation:armeniaKB 18s ease-in-out infinite alternate;}
.armenia-hero .ah-slider-inner-container > .ah-slide:nth-of-type(1) img{animation-delay:0s;transform-origin:30% 40%;}
.armenia-hero .ah-slider-inner-container > .ah-slide:nth-of-type(2) img{animation-delay:-4s;transform-origin:70% 60%;}
.armenia-hero .ah-slider-inner-container > .ah-slide:nth-of-type(3) img{animation-delay:-9s;transform-origin:40% 70%;}
.armenia-hero .ah-slider-inner-container > .ah-slide:nth-of-type(4) img{animation-delay:-13s;transform-origin:60% 30%;}
@keyframes armeniaKB{from{transform:scale(1.06);}to{transform:scale(1.18);}}

/* Pagination dot active color tuned for cream background (use primary navy) */
.armenia-hero .pagination-container .pagination-item{background:rgba(21,35,59,0.35) !important;transition:background 0.6s ease,height 0.6s ease !important;}
.armenia-hero .pagination-container .pagination-item.active{background:var(--primaryColor1) !important;}