body{background:#f5f3ef}
.hpa-hero{padding:16px 0 0}
.hpa-hero-box{position:relative;min-height:390px;overflow:hidden;border-radius:28px;background:#fff;box-shadow:var(--hp-shadow)}
.hpa-hero-image{position:absolute;inset:0 0 0 20%;background:url("/images/gt/homepage-mosaic/hp-main-slika-4.jpg") center/cover no-repeat}
.hpa-hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 23%,rgba(255,255,255,.94) 32%,rgba(255,255,255,.62) 45%,rgba(255,255,255,0) 55%)}
.hpa-hero-content{position:relative;z-index:1;width:50%;padding:62px 0 34px 31px}
.hpa-hero .hp-eyebrow{margin-bottom:4px}
.hpa-hero h1{margin:0;font-size:clamp(38px,5.1vw,66px);line-height:.98;letter-spacing:-.055em}
.hpa-hero h1 span{display:block;color:var(--hp-orange)}
.hpa-hero-copy{max-width:558px;margin:17px 0 20px;color:#536174;font-size:16px}
.hpa-hero-copy span{display:block}
.hpa-proof{max-width:630px;row-gap:9px}
.hpa-mosaic-tools{position:static;display:flex;align-items:center;gap:18px;padding:13px 0;background:transparent}
.hpa-mosaic-tools .hp-filter-pills{min-width:0;flex:1 1 auto}
.hpa-mosaic-tools .hp-text-link{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.hpa-mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:5px}
.hpa-card{position:relative;display:block;container-type:inline-size;aspect-ratio:315/300;overflow:hidden;border:0;border-radius:0;background:#d9d9d9;box-shadow:none;isolation:isolate;transition:transform .23s ease,box-shadow .23s ease}
.hpa-card--wide{grid-column:span 2;aspect-ratio:auto}
.hpa-card picture{display:block;width:100%;height:100%}
.hpa-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .48s cubic-bezier(.2,.75,.25,1),filter .25s ease}
.hpa-card-title,.hpa-card-subtitle,.hpa-card-duration,.hpa-card-price,.hpa-card-extra,.hpa-card-cta{position:absolute;z-index:2;pointer-events:none}
.hpa-card-mobile-only{display:none}
.hpa-card-title,.hpa-card-subtitle,.hpa-card-duration,.hpa-card-price,.hpa-card-extra{color:#fff;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;line-height:1;text-shadow:1px 2px 4px rgba(0,0,0,.88)}
.hpa-card-title{left:var(--title-x,-100%);top:var(--title-y,-100%);max-width:76%;font-size:29px;font-size:9.2cqw;letter-spacing:-.025em;white-space:nowrap}
.hpa-card-title::after{content:"";display:block;width:var(--line-width,100%);height:1px;margin-top:var(--line-gap,4px);background:rgba(255,255,255,.72);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.hpa-card-subtitle{left:var(--subtitle-x,-100%);top:var(--subtitle-y,-100%);font-size:16px;font-size:5.2cqw;white-space:nowrap}
.hpa-card-duration{left:var(--duration-x,-100%);top:var(--duration-y,-100%);font-size:16px;font-size:5.1cqw;white-space:nowrap}
.hpa-card-duration--mobile-only{display:none}
.hpa-card-price{left:var(--price-x,-100%);top:var(--price-y,-100%);font-size:25px;font-size:8.1cqw;transform:translateX(-5%);white-space:nowrap}
.hpa-card-price--aligned{display:inline-flex;align-items:center;gap:.08em}
.hpa-card-currency{display:block;font-size:.92em;line-height:1;transform:translateY(var(--currency-y,0))}
.hpa-card-extra{left:var(--extra-x,-100%);top:var(--extra-y,-100%);font-size:15px;font-size:4.8cqw;white-space:nowrap}
.hpa-card-cta{left:var(--cta-left,auto);right:var(--cta-right,0);top:var(--cta-top,auto);bottom:var(--cta-bottom,0);display:inline-flex;min-height:34px;min-height:10.7cqw;align-items:center;padding:7px 12px;padding:2.2cqw 3.8cqw;background:#ff7200;color:#fff;font:600 14px/1.1 Arial,Helvetica,sans-serif;font:600 4.4cqw/1.1 Arial,Helvetica,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.13);transition:background-color .2s ease,box-shadow .2s ease}
.hpa-card--wide .hpa-card-title{font-size:29px;font-size:4.55cqw}
.hpa-card--wide .hpa-card-subtitle{font-size:17px;font-size:2.7cqw}
.hpa-card--wide .hpa-card-duration{font-size:16px;font-size:2.55cqw}
.hpa-card--wide .hpa-card-price{font-size:29px;font-size:4.55cqw}
.hpa-card--wide .hpa-card-extra{font-size:15px;font-size:2.35cqw}
.hpa-card--wide .hpa-card-cta{min-height:34px;min-height:5.3cqw;padding:7px 12px;padding:1.1cqw 1.9cqw;font-size:14px;font-size:2.2cqw}
.hpa-card--dark-copy .hpa-card-title,.hpa-card--dark-copy .hpa-card-duration,.hpa-card--dark-copy .hpa-card-price{color:#252525;text-shadow:1px 1px 4px rgba(255,255,255,.95)}
.hpa-card--dark-copy .hpa-card-title::after{background:rgba(37,37,37,.6);box-shadow:0 1px 1px rgba(255,255,255,.4)}
.hpa-card--izbor-popularnih-putovanja-kapadokija .hpa-card-title{max-width:68%;color:#f36b12;font:800 22px/1.04 Arial,Helvetica,sans-serif;font:800 7cqw/1.04 Arial,Helvetica,sans-serif;letter-spacing:-.025em;text-shadow:0 1px 3px rgba(255,255,255,.95);white-space:normal}
.hpa-card--izbor-popularnih-putovanja-kapadokija .hpa-card-title::after{display:none}
.hpa-card--talijanska-jezera-villa-balbianello .hpa-card-title{max-width:51%;font-size:4cqw;white-space:normal}
.hpa-card--talijanska-jezera-villa-balbianello .hpa-card-title::after{display:none}
.hpa-card--dvorci-bavarske-neuschwanstein .hpa-card-title{font-size:7.9cqw}
.hpa-card--legacy .hpa-card-price{font-size:8.5cqw}
.hpa-card:hover{z-index:1;transform:translateY(-2px);box-shadow:0 15px 30px rgba(23,34,52,.18)}
.hpa-card:hover img{transform:scale(1.018);filter:saturate(1.04)}
.hpa-card:hover .hpa-card-cta{background:#dc5d00;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.hpa-card:focus-visible{z-index:2;outline:3px solid #ff7200;outline-offset:3px}
.hpa-card[hidden]{display:none}

@media(max-width:900px){
  .hpa-mosaic-tools{gap:12px}
  .hpa-mosaic-tools .hp-text-link{font-size:11px}
  .hpa-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hpa-card,.hpa-card--wide{grid-column:span 1;aspect-ratio:315/300;border-radius:0}
  .hpa-card-title,.hpa-card--wide .hpa-card-title{left:var(--m-title-x,var(--title-x,-100%));top:var(--m-title-y,var(--title-y,-100%));font-size:29px;font-size:9.2cqw}
  .hpa-card-desktop-only{display:none}
  .hpa-card-mobile-only{display:block}
  .hpa-card-subtitle,.hpa-card--wide .hpa-card-subtitle{left:var(--m-subtitle-x,var(--subtitle-x,-100%));top:var(--m-subtitle-y,var(--subtitle-y,-100%));font-size:16px;font-size:5.2cqw}
  .hpa-card-duration,.hpa-card--wide .hpa-card-duration{left:var(--m-duration-x,var(--duration-x,-100%));top:var(--m-duration-y,var(--duration-y,-100%));font-size:16px;font-size:5.1cqw}
  .hpa-card-duration--mobile-only{display:block}
  .hpa-card-price,.hpa-card--wide .hpa-card-price{left:var(--m-price-x,var(--price-x,-100%));top:var(--m-price-y,var(--price-y,-100%));font-size:25px;font-size:8.1cqw}
  .hpa-card-price--aligned{gap:var(--m-currency-gap,.08em)}
  .hpa-card-title::after{width:var(--m-line-width,var(--line-width,100%));margin-top:var(--m-line-gap,var(--line-gap,4px))}
  .hpa-card-currency{transform:translateY(var(--m-currency-y,var(--currency-y,0)))}
  .hpa-card-extra,.hpa-card--wide .hpa-card-extra{left:var(--m-extra-x,var(--extra-x,-100%));top:var(--m-extra-y,var(--extra-y,-100%));font-size:15px;font-size:4.8cqw}
  .hpa-card-cta,.hpa-card--wide .hpa-card-cta{min-height:10.7cqw;padding:2.2cqw 3.8cqw;font-size:4.4cqw}
  .hpa-card--izbor-popularnih-putovanja-kapadokija .hpa-card-title{font-size:22px;font-size:7cqw}
  .hpa-card--talijanska-jezera-villa-balbianello .hpa-card-title{max-width:76%;font-size:8cqw}
  .hpa-card--dvorci-bavarske-neuschwanstein .hpa-card-title{font-size:7.9cqw}
  /* Četvrtaste kartice na mobitelu koriste isti art direction kao na desktopu. */
  .hpa-card:not(.hpa-card--wide) .hpa-card-title{left:var(--sq-m-title-x,var(--title-x,-100%));top:var(--sq-m-title-y,var(--title-y,-100%))}
  .hpa-card:not(.hpa-card--wide) .hpa-card-subtitle{left:var(--sq-m-subtitle-x,var(--subtitle-x,-100%));top:var(--sq-m-subtitle-y,var(--subtitle-y,-100%))}
  .hpa-card:not(.hpa-card--wide) .hpa-card-duration{left:var(--sq-m-duration-x,var(--duration-x,-100%));top:var(--sq-m-duration-y,var(--duration-y,-100%))}
  .hpa-card:not(.hpa-card--wide) .hpa-card-price{left:var(--sq-m-price-x,var(--price-x,-100%));top:var(--sq-m-price-y,var(--price-y,-100%))}
  .hpa-card:not(.hpa-card--wide) .hpa-card-extra{left:var(--sq-m-extra-x,var(--extra-x,-100%));top:var(--sq-m-extra-y,var(--extra-y,-100%))}
  .hpa-card:not(.hpa-card--wide) .hpa-card-title::after{width:var(--line-width,100%);margin-top:var(--line-gap,4px)}
  .hpa-card:not(.hpa-card--wide) .hpa-card-currency{transform:translateY(var(--currency-y,0))}
  .hpa-card:not(.hpa-card--wide) .hpa-card-price--aligned{gap:.08em}
  .hpa-card--italija-vernazza .hpa-card-duration{text-shadow:1px 2px 4px rgba(0,0,0,.98),0 0 2px rgba(0,0,0,.62)}
  .hpa-card--amsterdam-kanal-kuce .hpa-card-title,.hpa-card--amsterdam-kanal-kuce .hpa-card-price{text-shadow:1px 2px 5px rgba(0,0,0,.98),0 0 2px rgba(0,0,0,.5)}
}
@media(max-width:760px){
  .hpa-hero{padding-top:0}
  .hpa-hero-box{margin-inline:-14px;min-height:0;border-radius:0;box-shadow:none}
  .hpa-hero-image{position:relative;inset:auto;display:block;width:100%;height:210px;background-position:center 55%}
  .hpa-hero-fade{display:none}
  .hpa-hero-content{width:auto;padding:20px 14px 20px}
  .hpa-hero h1{font-size:38px}
  .hpa-hero-copy{margin:14px 0 16px;font-size:14px}
  .hpa-proof{gap:9px 14px;font-size:12px}
  .hpa-mosaic-tools{margin-inline:-14px;padding:10px 14px}
  .hpa-mosaic{margin-inline:-7px}
}

/* Approved prototype: scale text and rules in the photograph's coordinate system.
   Original spans remain the no-JavaScript fallback and the source of CMS/Katalog text. */
.hpa-card--stable>.hpa-card-title,.hpa-card--stable>.hpa-card-subtitle,.hpa-card--stable>.hpa-card-duration,.hpa-card--stable>.hpa-card-price,.hpa-card--stable>.hpa-card-extra{display:none}
.hpa-mosaic-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none;fill:#fff}
.hpa-mosaic-overlay--mobile{display:none}
.hpa-mosaic-overlay text{filter:drop-shadow(1px 2px 2px rgb(0 0 0 / 88%))}
.hpa-mosaic-rule{stroke:rgb(255 255 255 / 72%);stroke-width:1;filter:drop-shadow(0 1px 1px rgb(0 0 0 / 25%))}
.hpa-card--dark-copy .hpa-mosaic-overlay{fill:#252525}
.hpa-card--dark-copy .hpa-mosaic-overlay text{filter:drop-shadow(1px 1px 2px rgb(255 255 255 / 95%))}
.hpa-card--dark-copy .hpa-mosaic-rule{stroke:rgb(37 37 37 / 60%)}
@media(max-width:900px){
  .hpa-mosaic-overlay--desktop{display:none}
  .hpa-mosaic-overlay--mobile{display:block}
  .hpa-card--sarajevo-mostar .hpa-card-cta{left:0;right:auto}
}
