/* ==========================================================================
   Putokazi Split — naslovnica
   Loads after front.css. Everything is scoped under .pk- prefixed classes so
   the existing pages (Kontakt, Galerije, detalj putovanja) stay untouched.
   ========================================================================== */

:root {
    --pk-ink: #15302c;
    --pk-deep: #0e4f5c;
    --pk-sea: #2c8597;
    --pk-coral: #d9663e;
    --pk-muted: #5e706c;
    --pk-line: rgba(21, 48, 44, .13);
    --pk-paper: #faf6ec;
    --pk-paper2: #f3ecdb;

    /* The proposal's coral and sea sit at 3.3:1 and 4.0:1 on warm paper, which
       is under WCAG AA for the small labels that use them (11–14px). These
       darker variants clear 4.5:1 while holding the same hue; the originals
       stay for large display type and for white-on-colour fills. */
    --pk-coral-text: #b8441f;
    --pk-sea-text: #256f7e;

    /* Coral as a *surface* carrying white text. The display coral above tops out
       at 3.55:1 against pure white, so no opacity tweak can reach AA — the fill
       itself has to darken. This one clears 4.5:1 with white, which keeps the
       newsletter band and the nav CTA hover legible. The lighter --pk-coral
       stays for hairlines and icons, where contrast rules do not bind. */
    --pk-coral-surface: #c04d26;

    /* Surfaces and type used on dark imagery (hero). */
    --pk-surface: #fff;
    --pk-night: #0e2b31;
    --pk-on-night: rgba(255, 255, 255, .88);
    --pk-accent-soft: #f0c7ae;
    --pk-accent-warm: #f2a87e;

    /* Layout rail. Every section aligns to this width. Rails that also carry a
       gutter must use box-sizing:border-box, or the padding is added to the
       max-width and the section renders wider than the hero. */
    --pk-rail: 1360px;
    --pk-gutter: 24px;

    /* The hero photo extends this far past the content rail on each side. The
       text inside it stays on the rail, so the overhang becomes the text's
       inset from the photo edge (24px gutter + 40px bleed = 64px) without
       breaking alignment with the sections below. */
    --pk-hero-bleed: 40px;
}

/* --- Surfaces ------------------------------------------------------------ */

/* The page is warm paper (set on body in front.css). The alternating band that
   used pure white now steps one tone deeper instead, so the rhythm still reads
   without a cold white block interrupting the paper. */
.white,
.container-fluid.white {
    background: var(--pk-paper2);
}

/* --- Focus ---------------------------------------------------------------- */

/* Without this the browser's own focus ring (a black outline in Chrome) shows
   on every link, button and input - including after a mouse click, which is
   where it reads as a bug rather than as an affordance.

   :focus-visible fires only when the browser judges a ring useful, i.e. on
   keyboard navigation, so pointer users stop seeing it while keyboard users
   keep a visible target. The ring is drawn in the palette's sea colour rather
   than removed: taking it away entirely would leave the site unusable without
   a mouse. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pk-sea);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The sea ring drops to 1.13:1 on the coral band and on coral buttons, i.e.
   effectively invisible. Those surfaces get a white ring instead. */
.pk-newsletter :focus-visible,
.pk-detail-cta:focus-visible,
.pk-booking-btn:focus-visible,
.pk-cta-primary:focus-visible,
.pk-cta-secondary:focus-visible {
    outline-color: var(--pk-surface);
    outline-offset: 3px;
}

/* Browsers without :focus-visible keep the default ring rather than none. */
@supports not selector(:focus-visible) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus {
        outline: 2px solid var(--pk-sea);
        outline-offset: 2px;
    }
}

/* --- Navigation ---------------------------------------------------------- */

/* Logo left, links right. front.css centres the old three-column navbar, so
   the layout properties are re-declared rather than patched.

   The bar is full-bleed on the same warm paper as the page; only its contents
   are constrained, so the header reads as a band rather than a floating panel,
   separated by a hairline rather than a colour change. */
.pk-nav {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    /* The logo is a two-line lockup at roughly 2:1 (164x80), so it needs more
       vertical clearance than a single wordmark would. */
    height: 104px;
    background: var(--pk-paper);
    border-bottom: 1px solid var(--pk-line);
}

/* Inner rail matches the hero card's 1360px, with no extra gutter, so the
   logo sits flush with the slider's left edge. */
.pk-nav .pk-nav-rail {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--pk-rail);
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Below 1408px the hero card gains a 24px side gutter (see its own rule);
   the rail follows it so the two stay aligned. */
@media (max-width: 1407px) {
    .pk-nav .pk-nav-rail {
        padding: 0 var(--pk-gutter);
    }
}

.pk-nav .logo {
    /* front.css puts 0 30px here, which fights the flex padding. */
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.pk-nav .logo img {
    display: block;
    width: 132px;
    height: auto;
    /* The wordmark is top-heavy ("PUTOKAZI" solid, "SPLIT" sparse), so centring
       the box makes the mark read as sitting low. Lift it optically. */
    position: relative;
    top: -2px;
}

.pk-nav-links {
    margin-left: auto;
    /* Full height so the active marker can sit on the bar's bottom edge. */
    align-self: stretch;
}

.pk-nav-links > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The old rule fixes every item to a 120px centred block, which cannot fit
   labels like "Opći uvjeti poslovanja" on one line. */
.pk-nav-links > ul > li > a,
.pk-nav-links > ul > li > span {
    width: auto;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--pk-ink);
    white-space: nowrap;
    transition: color .2s ease;
}

.pk-nav-links > ul > li > a:hover,
.pk-nav-links > ul > li:hover > span {
    color: var(--pk-coral-text);
}

/* front.css gives .cl-effect-13 links a `content:'•'` pseudo-element, normally
   transparent, and paints it via text-shadow in three places: on :hover, on
   :focus, and — permanently — on `.cl-effect-13.active`, in blue. That last
   one is what put three blue dots under the current page. Neutralise all of
   them and mark the current page with an underline instead. */
.pk-nav-links .cl-effect-13 a::before,
.pk-nav-links .cl-effect-13.active a::before,
.pk-nav-links .cl-effect-13 a:hover::before,
.pk-nav-links .cl-effect-13 a:focus::before {
    /* front.css's `.cl-effect-13.active a::before` has the same specificity as
       the first selector here, so this would win only by load order. The
       .active selector above raises specificity and makes it explicit. */
    content: none;
    display: none;
    text-shadow: none;
}

/* Current page: coral label, with the marker riding the bar's bottom edge
   rather than hugging the text, so it reads as a nav indicator and not as an
   underline. The rule hangs off the full-height <li>, and sits on top of the
   header's 1px border. */
/* front.css's `.navbar .links li` sets display:inline-block and outranks a
   bare `.pk-nav-links > ul > li`, so .navbar is included here to win. */
.navbar .pk-nav-links > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.pk-nav-links > ul > li.active > a {
    color: var(--pk-coral-text);
    font-weight: 600;
}

.navbar .pk-nav-links > ul > li.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--pk-coral);
}

/* Keyboard focus still needs a visible ring, since the flourish is gone.
   The site-wide treatment is in the Focus section near the top of the file;
   this keeps the nav's own offset. */
.pk-nav-links a:focus-visible,
.pk-nav-cta:focus-visible {
    outline-offset: 3px;
    border-radius: 3px;
}

/* Utility/legal link: present but not competing with the commercial nav. */
.pk-nav-links > ul > li.pk-nav-muted > a {
    color: var(--pk-muted);
    font-size: 13.5px;
}

/* Accent CTA in the header, as in the proposal — replaces the red block that
   floated loose in the hero's corner. */
.pk-nav-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 11px 18px;
    border-radius: 4px;
    background: var(--pk-deep);
    color: var(--pk-surface);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}

.pk-nav-cta:hover,
.pk-nav-cta:focus {
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
    text-decoration: none;
}

.pk-nav-cta svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* Dropdown panel inherits the card treatment used elsewhere on the page. */
.pk-nav-links .has-dropdown ul {
    width: 290px;
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(14, 48, 44, .16);
    padding: 6px;
    background: var(--pk-surface);
}

.pk-nav-links .has-dropdown ul li a {
    border-bottom: 0;
    border-radius: 5px;
    padding: 9px 12px;
    line-height: 1.3;
}

.pk-nav-links .has-dropdown ul li a:hover {
    background: var(--pk-paper2);
    color: var(--pk-coral-text);
}

@media (max-width: 800px) {
    .pk-nav {
        /* 88px keeps ~19px clearance around the 104px-wide (~51px tall) logo,
           matching the desktop bar's breathing room. */
        height: 88px;
    }

    .pk-nav .pk-nav-rail {
        padding: 0 18px;
    }

    .pk-nav .logo img {
        width: 104px;
    }

    /* The sidebar menu carries this link on small screens. */
    .pk-nav-cta {
        display: none;
    }

    /* front.css already hides .links and shows .hamburger below 800px; keep
       the logo hard left and the button hard right. */
    .pk-nav .hamburger {
        padding: 0;
        margin-left: auto;
    }
}

/* --- Hero ---------------------------------------------------------------- */

/* The slider becomes an inset rounded card rather than a full-bleed strip.
   Radius and shadow live here because slick nests the images two levels deep
   (.slick-list > .slick-track), so clipping has to happen on the ancestor. */
.home-slider {
    position: relative;
    /* Deliberately wider than --pk-rail: see --pk-hero-bleed. */
    max-width: calc(var(--pk-rail) + 2 * var(--pk-hero-bleed));
    margin: 24px auto 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(14, 48, 44, .18);
    background: var(--pk-night);
}

/* Slick builds these wrappers at runtime; they must not clip the radius or
   collapse the height. */
.home-slider .slider,
.home-slider .slick-list,
.home-slider .slick-track {
    height: 100%;
}

/* Proposal hero is a wide, shallow band: 1360px wide against a 600px stage,
   so the aspect ratio drives the height instead of the viewport. */
.home-slider .slider img {
    width: 100%;
    height: auto;
    aspect-ratio: 1360 / 600;
    min-height: 460px;
    max-height: 620px;
    object-fit: cover;
}

.pk-hero-overlay {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 0 54px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(7, 38, 44, 0) 0%,
        rgba(7, 34, 40, .38) 45%,
        rgba(7, 32, 38, .82) 100%
    );
}

/* Shares the rail with every other section, so the headline starts on the same
   vertical as "Aktualna putovanja" below it. The slider itself is the rail with
   no gutter, so the extra padding here is what insets the text from the image
   edge — it must stay in step with --pk-gutter, not a separate clamp. */
.pk-hero-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

/* Re-enable clicks only for actual controls inside the overlay. */
.pk-hero-inner a,
.pk-hero-inner button {
    pointer-events: auto;
}

.pk-hero-eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--pk-accent-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.pk-hero-title {
    margin: 0 0 20px;
    max-width: 16ch;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    /* Matches the proposal: fluid from 40px up to 74px. */
    font-size: clamp(40px, 5.2vw, 74px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.02em;
}

.pk-hero-title em {
    color: var(--pk-accent-warm);
    font-style: italic;
}

.pk-hero-lead {
    margin: 0;
    max-width: 54ch;
    color: var(--pk-on-night);
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 300;
    line-height: 1.6;
}

/* --- Newsletter ---------------------------------------------------------- */

/* Full-bleed coral band, as in the proposal: copy on the left, form on the
   right. front.css styles .newsletter/.flex-form for the old stacked layout,
   so the pk- wrapper re-declares what it needs. */
.pk-newsletter {
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
}

.pk-newsletter-inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 58px var(--pk-gutter);
}

.pk-newsletter-copy h2 {
    margin: 0 0 10px;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.01em;
}

/* Pure white, not a translucent one: at 92% over the coral surface the body
   lands at 4.35:1, just under AA. Full white clears it at 4.85:1. */
.pk-newsletter-copy p {
    margin: 0;
    max-width: 52ch;
    color: var(--pk-surface);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

.pk-newsletter-copy strong {
    font-weight: 600;
}

/* Inputs and button sit on one rail; Yii wraps each field in .form-group. */
.pk-newsletter .pk-nl-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.pk-newsletter .pk-nl-form .form-group {
    margin: 0;
}

/* front.css has `#contact-form .form-control{height:50px}` — an ID selector,
   so the ID is included here to win and keep inputs level with the button. */
.pk-newsletter #contact-form .form-control,
.pk-newsletter .pk-nl-form input {
    /* Explicit, so the 1px border does not push these past the button's 48px. */
    box-sizing: border-box;
    height: 48px;
    min-width: 172px;
    padding: 5px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--pk-surface);
    color: var(--pk-ink);
    font-size: 15px;
}

.pk-newsletter #contact-form .form-control::placeholder,
.pk-newsletter .pk-nl-form input::placeholder {
    color: var(--pk-muted);
}

.pk-newsletter #contact-form .form-control:focus,
.pk-newsletter .pk-nl-form input:focus {
    outline: none;
    border-color: var(--pk-deep);
    box-shadow: 0 0 0 3px rgba(14, 79, 92, .25);
}

.pk-newsletter .send-newsletter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;
    background: var(--pk-deep);
    color: var(--pk-surface);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
}

.pk-newsletter .send-newsletter:hover,
.pk-newsletter .send-newsletter:focus {
    background: var(--pk-night);
}

.pk-newsletter .send-newsletter svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-newsletter .send-newsletter path {
    fill: none;
}

/* Sits under the copy, not under the button: attached to the offer rather than
   reading as fine print on the submit action. */
.pk-newsletter-copy small {
    display: block;
    margin-top: 14px;
    max-width: 52ch;
    color: var(--pk-surface);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Validation messages from ActiveForm, on coral. */
.pk-newsletter .help-block {
    margin: 4px 0 0;
    color: var(--pk-surface);
    font-size: 12px;
}

@media (max-width: 900px) {
    .pk-newsletter-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 44px var(--pk-gutter);
    }
}

@media (max-width: 700px) {
    .pk-newsletter-inner {
        padding: 38px 18px;
    }

    .pk-newsletter .pk-nl-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Yii wraps each input in .form-group; stretch it so the input fills. */
    .pk-newsletter .pk-nl-form .form-group {
        width: 100%;
    }

    .pk-newsletter #contact-form .form-control,
    .pk-newsletter .pk-nl-form input {
        width: 100%;
        min-width: 0;
    }

    .pk-newsletter .send-newsletter {
        justify-content: center;
        width: 100%;
    }
}

/* --- Notes ("Obavijesti") ------------------------------------------------ */

/* Follows the proposal's "Zašto Putokazi" block: an intro column beside a set
   of tiles separated by hairlines (the 1px grid gap shows the container's
   border colour through). */
.pk-notes {
    padding: 0;
}

.pk-notes-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: center;
    padding: 90px 0;
}

.pk-notes-intro h2 {
    margin: 0 0 18px;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.pk-notes-intro p {
    margin: 0;
    max-width: 420px;
    color: var(--pk-muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

.pk-notes-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--pk-line);
    border: 1px solid var(--pk-line);
}

.pk-note {
    background: var(--pk-paper2);
    padding: 26px 24px;
}

/* An odd number of notes would leave a gap in the 2-column grid; the last
   tile spans instead, keeping the block a clean rectangle. */
.pk-notes-tiles > .pk-note:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Icon and title share one row, so each tile is a line shorter.
   Baseline-ish alignment rather than `center`: centring puts the icon in the
   middle of the h3's line box, but Newsreader's descender space sits below the
   visible letterforms, so the icon then reads as hanging low. */
.pk-note-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 9px;
}

.pk-note svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* Nudge onto the cap height of the 19px/1.22 heading. */
    margin-top: 2px;
    fill: none;
    stroke: var(--pk-deep);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-note h3 {
    margin: 0;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.01em;
}

.pk-note p {
    margin: 0;
    color: var(--pk-muted);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 800px) {
    .pk-notes-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 60px 0;
    }

    .pk-notes-intro p {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .pk-notes-tiles {
        grid-template-columns: 1fr;
    }

    .pk-note {
        padding: 22px 20px;
    }
}

/* --- Trips --------------------------------------------------------------- */

/* Bootstrap (published via Yii's asset dir) sets .container{width:1170px} at
   >=1200px — a fixed width, which a max-width cannot override. These rails set
   width:100% so --pk-rail governs and every section lines up with the hero. */
.pk-travels {
    box-sizing: border-box;
    width: 100%;
    /* front.css pulls .premium-travels up into the hero; the grid sits below
       it instead, so the negative margin is cancelled here. */
    margin-top: 0;
    max-width: var(--pk-rail);
    margin-left: auto;
    margin-right: auto;
    padding: 76px var(--pk-gutter) 90px;
}

.pk-notes .container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding-left: var(--pk-gutter);
    padding-right: var(--pk-gutter);
}

.pk-travels-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.pk-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--pk-coral-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.pk-travels-head h2 {
    margin: 0;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    /* Proposal section heading scale. */
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.02em;
}

/* Three across on desktop: at the 1360px rail a 285px auto-fill track yields
   four, which makes the cards too narrow for the titles to breathe. */
.pk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 1100px) {
    .pk-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below this the 285px track nearly fills a 320px screen; go explicitly to one
   column so cards are not squeezed against the gutters. */
@media (max-width: 700px) {
    .pk-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pk-travels,
    .pk-notes .container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

.pk-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pk-surface);
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                box-shadow .4s ease,
                border-color .4s ease;
}

.pk-card:hover,
.pk-card:focus {
    transform: translateY(-7px);
    box-shadow: 0 22px 46px rgba(14, 48, 44, .15);
    border-color: rgba(14, 79, 92, .34);
    color: inherit;
    text-decoration: none;
}

/* Ratio rather than a fixed height: the grid is fluid, so a fixed 212px made
   photos letterbox at 420px-wide cards (1.98:1) and go near-square at 1100px
   (1.57:1). 3:2 holds the framing constant at every column width. */
.pk-card-media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

/* aspect-ratio has been in every evergreen browser since 2021, but the fallback
   costs one rule and keeps older Safari/Firefox from collapsing the box. */
@supports not (aspect-ratio: 3 / 2) {
    .pk-card-media {
        height: 212px;
    }
}

/* Single column below 700px: the card spans the full width, where 3:2 is too
   tall. This must stay after the base rule — an equal-specificity override in
   an earlier block loses on source order, which is how the previous
   `height:auto` here was silently dead. */
@media (max-width: 700px) {
    .pk-card-media {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

.pk-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.pk-card:hover .pk-card-media img {
    transform: scale(1.07);
}

.pk-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 11px;
    background: rgba(7, 32, 38, .82);
    border-radius: 3px;
    color: var(--pk-surface);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
}

.pk-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 20px;
}

.pk-card-region {
    display: block;
    margin-bottom: 10px;
    color: var(--pk-sea-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pk-card-body h3 {
    margin: 0 0 11px;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.pk-card-blurb {
    flex: 1;
    margin: 0 0 20px;
    color: var(--pk-muted);
    font-size: 14px;
    line-height: 1.55;
    /* Clamp to three lines so footers line up across a row regardless of how
       long the copy is. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* An empty shortDesc would otherwise leave the footer floating mid-card. */
.pk-card-blurb:empty {
    margin: 0 0 6px;
}

.pk-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--pk-line);
}

.pk-card-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pk-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.pk-card-date svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke: var(--pk-coral);
    fill: none;
}

.pk-card-more {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pk-coral-text);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Drawn rather than typed: Google's font subsets ship U+2191/2193 but not
   U+2192, so a literal → would render from a fallback face. */
.pk-card-more svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.pk-card:hover .pk-card-more svg {
    transform: translateX(3px);
}

.pk-empty {
    padding: 70px 20px;
    border: 1px dashed var(--pk-line);
    border-radius: 6px;
    color: var(--pk-muted);
    text-align: center;
}

/* --- Responsive ---------------------------------------------------------- */

/* 1440 (slider) + 2*24 gutter = 1488. Below that the card would touch the
   viewport edges, so it takes the gutter itself. From here down the photo and
   the content rail share that gutter, so the overhang that was providing the
   text's inset disappears — the hero adds it back as padding instead, which
   keeps the inset at 64px all the way down. The text no longer aligns with the
   sections below in this range, but the rail has itself run out of room here,
   so there is nothing left to align to. */
@media (max-width: 1487px) {
    .home-slider {
        margin-left: var(--pk-gutter);
        margin-right: var(--pk-gutter);
    }
}

/* Between 1408 and 1487 the photo is still wider than the rail, so the text —
   capped at the rail and centred — already clears the edge by the leftover
   slack. Adding the bleed as padding there too would double-count it and push
   the inset to ~104px. Below 1408 that slack is gone and the padding takes
   over, holding the inset at a flat 64px. */
@media (max-width: 1407px) {
    .pk-hero-inner {
        padding-left: calc(var(--pk-gutter) + var(--pk-hero-bleed));
        padding-right: calc(var(--pk-gutter) + var(--pk-hero-bleed));
    }
}

@media (max-width: 991px) {
    .home-slider {
        border-radius: 18px;
        margin-left: 18px;
        margin-right: 18px;
    }

    /* A 64px inset is a lot of a tablet-width photo; ease it off as the frame
       shrinks. The phone block below replaces this again at 20px. */
    .pk-hero-inner {
        padding-left: 36px;
        padding-right: 36px;
    }

    .home-slider .slider img {
        aspect-ratio: 3 / 2;
        min-height: 380px;
        max-height: 520px;
    }

    .pk-hero-overlay {
        padding-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .home-slider {
        border-radius: 14px;
        margin: 14px 14px 0;
    }

    .home-slider .slider img {
        /* Taller crop on phones so the subject survives the narrow frame. */
        aspect-ratio: 4 / 5;
        min-height: 320px;
        max-height: 440px;
    }

    .pk-hero-overlay {
        /* On phones the slider is short; a solid panel reads better than a
           gradient stretched over a small image. */
        position: static;
        padding: 22px 0 26px;
        background: var(--pk-night);
    }

    .pk-hero-inner {
        padding: 0 20px;
    }

    .pk-hero-title {
        max-width: none;
    }

    .pk-travels {
        /* Vertical only — the horizontal gutter is set in the 700px block and
           must not be reset to 0 by a shorthand here. */
        padding-top: 46px;
        padding-bottom: 56px;
    }

    .pk-travels-head {
        margin-bottom: 26px;
    }

}

/* --- Footer --------------------------------------------------------------- */

/* front.css already paints .footer dark (#1A2127) and strips the ul bullets.
   What follows only re-lays-out the same content onto the shared rail: contact
   + company info + links across the top, the statutory notice as a full-width
   band underneath. No copy is changed — the legal text is quoted verbatim. */

.pk-footer {
    /* Replaces the .padding50 utility that used to sit on the element. */
    padding: 64px 0 0;
    background: var(--pk-night);
    color: rgba(255, 255, 255, .72);
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

.pk-footer-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

.pk-footer-grid {
    display: grid;
    /* Weighted by the content, not by the column's billing. "Podaci o tvrtki"
       holds the longest lines on the page ("Direktor/član uprave: Željko
       Uvodić, Društvo zastupa pojedinačno i samostalno", 77 chars) and so takes
       the widest track; the link list tops out at 22 chars and takes the
       narrowest. The earlier 1.15/1/.7 split had this exactly inverted. */
    grid-template-columns: 1fr 1.25fr .6fr;
    gap: 48px;
    padding-bottom: 48px;
}

.pk-footer .pk-footer-col svg {
    /* front.css sets 40px here; the address block sits closer in the proposal. */
    width: 132px;
    height: auto;
    margin-bottom: 22px;
}

/* The logo paths are authored in two dark greys that vanish on the night
   surface. front.css already forces them white — repeated here so the rule
   survives independently of load order. */
.pk-footer svg path {
    fill: #fff;
}

.pk-footer-kicker {
    margin: 0;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-accent-warm);
}

.pk-footer-name {
    display: block;
    margin: 4px 0 6px;
    font-family: "Newsreader", Georgia, serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: .01em;
    color: #fff;
}

.pk-footer-address {
    margin: 0 0 18px;
    max-width: 34ch;
}

.pk-footer-heading {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-accent-warm);
}

.pk-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pk-footer-list > li + li {
    margin-top: 7px;
}

.pk-footer-list strong {
    font-weight: 600;
    color: #fff;
}

.pk-footer-links a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.pk-footer-links a:hover,
.pk-footer-links a:focus {
    color: #fff;
    border-bottom-color: var(--pk-accent-warm);
}

.pk-footer-legal {
    padding: 26px 0 34px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .56);
}

.pk-footer-legal .pk-footer-list {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px 44px;
}

/* The grid already spaces the two notices; the generic li rule would add a
   second, uneven gap on top of it. */
.pk-footer-legal .pk-footer-list > li + li {
    margin-top: 0;
}

@media (max-width: 900px) {
    .pk-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    /* The brand column spans both tracks so the address is not squeezed. */
    .pk-footer-brand {
        grid-column: 1 / -1;
    }

    .pk-footer-legal .pk-footer-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .pk-footer {
        padding-top: 46px;
    }

    .pk-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 34px;
    }

    .pk-footer-address {
        max-width: none;
    }
}

/* ==========================================================================
   Detalj putovanja
   Isti rail, tipografija i tokeni kao naslovnica. Stare klase (.travel-hero,
   .limit70, .cd-timeline, .col-lg-*) vise se ne koriste u ovom prikazu.
   ========================================================================== */

/* --- Detail: rail and sections ------------------------------------------- */

.pk-detail-rail {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

.pk-detail-section {
    padding: 72px 0;
}

/* Alternating band, same rhythm as the homepage. */
.pk-detail-section--alt {
    background: var(--pk-paper2);
}

/* Sekcija koja namjerno ostaje na svijetlom papiru (program po danima).
   --pk-paper2 se ovdje redefinira umjesto da se gasi samo pozadina: oznake
   dana nose prsten (box-shadow ... var(--pk-paper2)) koji prekriva okomitu
   crtu iza sebe, pa mora biti iste boje kao podloga sekcije. Ovako i osnovno
   pravilo i ono u media queryju prate ton bez dupliranja. */
.pk-detail-section--plain {
    --pk-paper2: var(--pk-paper);
    background: var(--pk-paper);
}

.pk-detail-head {
    margin-bottom: 34px;
}

.pk-detail-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--pk-coral-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.pk-detail-head h2 {
    margin: 0;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
}

/* --- Detail: hero --------------------------------------------------------- */

/* Same construction as the homepage slider: photo on the rail plus a bleed,
   text held on the content rail so it lines up with everything below. */
.pk-detail-hero {
    position: relative;
    max-width: calc(var(--pk-rail) + 2 * var(--pk-hero-bleed));
    margin: 24px auto 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--pk-night);
    box-shadow: 0 30px 60px rgba(14, 48, 44, .18);
}

.pk-detail-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1360 / 560;
    min-height: 420px;
    max-height: 580px;
    object-fit: cover;
}

.pk-detail-hero-overlay {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 0 46px;
    background: linear-gradient(
        180deg,
        rgba(7, 38, 44, 0) 0%,
        rgba(7, 34, 40, .42) 42%,
        rgba(7, 32, 38, .86) 100%
    );
}

.pk-detail-hero-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

.pk-detail-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--pk-accent-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.pk-detail-title {
    margin: 0 0 14px;
    max-width: 18ch;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.02em;
}

.pk-detail-lead {
    margin: 0 0 22px;
    max-width: 56ch;
    color: var(--pk-on-night);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 300;
    line-height: 1.6;
}

/* Dates / duration / code, read as one line of facts under the lead. */
.pk-detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.pk-detail-facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .92);
    font-size: 14.5px;
    font-weight: 500;
}

.pk-detail-facts svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    stroke: var(--pk-accent-warm);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 4px;
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.pk-detail-cta:hover,
.pk-detail-cta:focus {
    background: #a83a19;
    color: var(--pk-surface);
    text-decoration: none;
    transform: translateY(-1px);
}

.pk-detail-cta svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Detail: intro (description + gallery) -------------------------------- */

.pk-detail-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Only one of the two is present - let it use the full rail rather than
   leaving a dead half-column. */
.pk-detail-intro--single {
    grid-template-columns: 1fr;
}

/* Long-form copy wants a measure, not the full column width. */
.pk-detail-copy {
    max-width: 68ch;
}

.pk-detail-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pk-detail-gallery a {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
}

.pk-detail-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.pk-detail-gallery a:hover img {
    transform: scale(1.05);
}

/* The admin flags some images as "big"; honour it as a 2x2 cell. */
.pk-detail-gallery a.pk-gallery-big {
    grid-column: span 2;
    grid-row: span 2;
}

/* --- Detail: itinerary ---------------------------------------------------- */

.pk-detail-map {
    height: 46vh;
    min-height: 320px;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--pk-line);
}

.pk-itinerary {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Continuous spine behind the day markers. */
.pk-itinerary::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 27px;
    width: 2px;
    background: var(--pk-line);
}

.pk-itinerary-day {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding-bottom: 34px;
}

/* Zadnji dan: bez crte i bez donjeg razmaka - razmak do sljedece sekcije
   dolazi iz .pk-itinerary, pa se inace zbrajaju. */
.pk-itinerary-day:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.pk-itinerary-marker {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pk-surface);
    border: 1px solid var(--pk-line);
    box-shadow: 0 0 0 6px var(--pk-paper2);
}

.pk-itinerary-marker small {
    color: var(--pk-muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
}

.pk-itinerary-marker span {
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
}

.pk-itinerary-body {
    padding-top: 4px;
}

.pk-itinerary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 10px;
}

.pk-itinerary-head h3 {
    margin: 0;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    /* Titles are stored upper-case; the design wants sentence case. */
    text-transform: lowercase;
}

.pk-itinerary-head h3::first-letter {
    text-transform: uppercase;
}

.pk-itinerary-date {
    margin-left: auto;
    color: var(--pk-muted);
    font-size: 13px;
    white-space: nowrap;
}

.pk-itinerary-media {
    margin: 0 0 14px;
    max-width: 280px;
    border-radius: 6px;
    overflow: hidden;
}

.pk-itinerary-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Detail: main grid ---------------------------------------------------- */

.pk-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start;
}

.pk-detail-block {
    margin-bottom: 44px;
}

.pk-detail-main h3,
.pk-docs h3 {
    margin: 0 0 14px;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

/* --- Detail: rich text from the admin editor ------------------------------ */

/* The stored HTML is whatever the WYSIWYG produced - <text> wrappers, inline
   background-color, empty paragraphs. Normalise it rather than trusting it. */
.pk-rte {
    color: var(--pk-ink);
    font-size: 15.5px;
    line-height: 1.7;
}

.pk-rte p {
    margin: 0 0 12px;
}

.pk-rte p:last-child {
    margin-bottom: 0;
}

/* Editor leftovers: inline styles and non-standard tags. */
.pk-rte text {
    background: none !important;
    color: inherit !important;
}

.pk-rte ul,
.pk-rte ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.pk-rte li {
    margin-bottom: 5px;
}

.pk-rte a {
    color: var(--pk-sea-text);
    text-decoration: underline;
}

.pk-rte img {
    max-width: 100%;
    height: auto;
}

/* --- Detail: callouts ----------------------------------------------------- */

.pk-callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 8px;
    border: 1px solid var(--pk-line);
    background: var(--pk-surface);
}

.pk-callout svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* Optical alignment with the cap height of the heading, same as the
       homepage note tiles. */
    margin-top: 3px;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-callout h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

/* Skupina obavijesti zavrsava punim razmakom do sljedeceg bloka, a unutar
   skupine redci stoje blize jedan drugome.

   :last-of-type ovdje ne radi: gleda zadnji element ISTE VRSTE TAGA, a sva
   braca su <div>, pa je to blok s dokumentima - nikad obavijest. Pravilo se
   zato vezuje na obavijest iza koje NE slijedi druga obavijest. */
.pk-callout:not(:has(+ .pk-callout)) {
    margin-bottom: 44px;
}

/* Rezerva za preglednike bez :has(). Susjedne okomite margine se stapaju u
   vecu, pa 44 ovdje daje isti razmak i kad :has() radi i kad ne radi. */
.pk-callout + .pk-detail-block,
.pk-callout + .pk-docs {
    margin-top: 44px;
}

.pk-callout--info {
    background: #eef6f7;
    border-color: rgba(44, 133, 151, .28);
}

.pk-callout--info svg {
    stroke: var(--pk-sea-text);
}

.pk-callout--warn {
    background: #fdf3e8;
    border-color: rgba(217, 102, 62, .3);
}

.pk-callout--warn svg {
    stroke: var(--pk-coral-text);
}

.pk-callout-body {
    min-width: 0;
}

/* --- Detail: prices ------------------------------------------------------- */

/* Sidrena cijena (NN 101/2026) mora stajati uz svaku objavljenu cijenu, pa je
   stupac uvijek prisutan - samo je vizualno tisi od prodajne cijene. */
.pk-prices {
    margin-bottom: 34px;
}

.pk-prices h3 {
    margin: 0 0 14px;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
}

.pk-prices .tp-table {
    width: 100%;
    max-width: none;
    margin: 0 0 30px;
    border-collapse: collapse;
    background: var(--pk-surface);
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    overflow: hidden;
}

.pk-prices .tp-table th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pk-line);
    background: var(--pk-paper2);
    color: var(--pk-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
}

.pk-prices .tp-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pk-line);
    color: var(--pk-ink);
    font-size: 15px;
    vertical-align: top;
}

.pk-prices .tp-table tr:last-child td {
    border-bottom: none;
}

.pk-prices .tp-amount {
    text-align: right;
    white-space: nowrap;
}

.pk-prices td.tp-amount:not(.tp-anchor) {
    font-weight: 700;
}

/* Referentni podatak - prisutan, ali se ne natjece s prodajnom cijenom. */
.pk-prices .tp-anchor {
    color: var(--pk-muted);
    font-weight: 400;
}

.pk-prices .tp-note,
.pk-prices .tp-unit {
    display: block;
    margin-top: 4px;
    color: var(--pk-muted);
    font-size: 12.5px;
    font-weight: 400;
}

.pk-prices .tp-request {
    color: var(--pk-muted);
    font-style: italic;
    font-weight: 400;
}

.pk-prices .tp-empty {
    color: rgba(21, 48, 44, .28);
}

/* Fallback kad putovanje jos nema strukturirane cijene. */
.pk-prices--legacy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.pk-prices-col {
    min-width: 0;
}

/* --- Detail: booking card and documents ----------------------------------- */

.pk-detail-aside {
    position: sticky;
    top: 24px;
}

/* Padding now lives on the inner .pk-booking-price / .pk-booking-body blocks so
   the price header can carry its own divider edge to edge. */
.pk-booking-card {
    margin-bottom: 26px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pk-night);
    color: var(--pk-on-night);
}

.pk-booking-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--pk-accent-warm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Termin na vrhu kartice, odvojen od cijene tankom crtom. */
.pk-booking-when {
    padding: 18px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pk-booking-dates {
    margin: 0;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
}

.pk-booking-nights {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
}

.pk-booking-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 4px;
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}

.pk-booking-btn:hover,
.pk-booking-btn:focus {
    background: #a83a19;
    color: var(--pk-surface);
    text-decoration: none;
}

.pk-booking-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-booking-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.pk-booking-note strong {
    color: var(--pk-surface);
    font-weight: 600;
}

/* --- Detail: responsive --------------------------------------------------- */

@media (max-width: 1487px) {
    .pk-detail-hero {
        margin-left: var(--pk-gutter);
        margin-right: var(--pk-gutter);
    }
}

/* Mirrors the homepage hero: below 1408 the photo no longer overhangs the
   rail, so the text needs the inset as real padding. */
@media (max-width: 1407px) {
    .pk-detail-hero-inner {
        padding-left: calc(var(--pk-gutter) + var(--pk-hero-bleed));
        padding-right: calc(var(--pk-gutter) + var(--pk-hero-bleed));
    }
}

@media (max-width: 1100px) {
    .pk-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Stops being a sidebar, so it must stop sticking. */
    .pk-detail-aside {
        position: static;
    }

}

@media (max-width: 991px) {
    .pk-detail-hero {
        border-radius: 18px;
        margin-left: 18px;
        margin-right: 18px;
    }

    .pk-detail-hero-inner {
        padding-left: 36px;
        padding-right: 36px;
    }

    .pk-detail-hero-media img {
        aspect-ratio: 3 / 2;
        min-height: 360px;
        max-height: 500px;
    }

    .pk-detail-section {
        padding: 52px 0;
    }

    .pk-detail-intro {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .pk-detail-hero {
        border-radius: 14px;
        margin: 14px 14px 0;
    }

    .pk-detail-hero-media img {
        aspect-ratio: 4 / 5;
        min-height: 300px;
        max-height: 420px;
    }

    .pk-detail-hero-overlay {
        /* Same reasoning as the homepage: on a short phone-height image a solid
           panel is more legible than a gradient. */
        position: static;
        padding: 20px 0 24px;
        background: var(--pk-night);
    }

    .pk-detail-hero-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pk-detail-title {
        max-width: none;
    }

    .pk-detail-cta {
        display: flex;
        justify-content: center;
    }

    .pk-detail-section {
        padding-top: 40px;
        padding-bottom: 44px;
    }

    .pk-detail-rail {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pk-itinerary-day {
        grid-template-columns: 44px 1fr;
        gap: 16px;
    }

    .pk-itinerary::before {
        left: 21px;
    }

    .pk-itinerary-marker {
        width: 44px;
        height: 44px;
        box-shadow: 0 0 0 4px var(--pk-paper2);
    }

    .pk-itinerary-marker span {
        font-size: 18px;
    }

    .pk-itinerary-date {
        margin-left: 0;
    }

    .pk-detail-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .pk-prices--legacy {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pk-detail-map {
        height: 40vh;
        min-height: 260px;
    }
}

@media (max-width: 600px) {
    .pk-prices .tp-table th,
    .pk-prices .tp-table td {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    .pk-prices .tp-table th {
        font-size: 10px;
        letter-spacing: .08em;
    }
}

/* --- Detail: program checklist -------------------------------------------- */

/* travels.content is now a <ul> of individual inclusions rather than one
   run-on paragraph, so it reads as a checklist. Two columns on desktop -
   the items are short and a single column wasted the width. */
.pk-checklist ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pk-checklist li {
    position: relative;
    margin: 0;
    padding-left: 27px;
    font-size: 14.5px;
    line-height: 1.55;
}

/* Tick drawn with a background image so no markup change is needed and the
   stored HTML stays plain <li> text. */
.pk-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23256f7e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* The photo credit is not an inclusion; it trails the list quietly. */
.pk-checklist .image-credit {
    margin: 18px 0 0;
    color: var(--pk-muted);
    font-size: 12.5px;
    font-style: italic;
}

/* --- Detail: sidebar price ------------------------------------------------ */

/* Bez donjeg ruba: crta ispod zaglavlja tablice odmah ispod vec dijeli cijenu
   od cjenika, pa bi dvije linije jedna uz drugu izgledale kao greska. */
.pk-booking-price {
    padding: 18px 24px 16px;
}

.pk-booking-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.pk-booking-from {
    color: var(--pk-on-night);
    font-size: 13.5px;
    font-weight: 400;
}

.pk-booking-amount strong {
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1;
}

.pk-booking-tier {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
}

/* Referentni podatak: prisutan uz objavljenu cijenu, ali tiho. */
.pk-booking-anchor {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    line-height: 1.45;
}

.pk-booking-anchor span {
    color: rgba(255, 255, 255, .86);
    font-weight: 600;
}

.pk-booking-body {
    padding: 0 24px 24px;
}

.pk-booking-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    font-size: 13.5px;
}

.pk-booking-row strong {
    color: var(--pk-surface);
    white-space: nowrap;
}

/* --- Detail: trust row and sidebar contact -------------------------------- */

/* Every claim here comes from the trip's own data - the guarantee line only
   renders when priced inclusions exist, and the insurer only when actually
   named in the copy. Nothing is asserted on the agency's behalf. */
.pk-trust {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    list-style: none;
}

.pk-trust li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 9px;
    font-size: 12.5px;
    line-height: 1.45;
}

.pk-trust li:last-child {
    margin-bottom: 0;
}

.pk-trust svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    stroke: var(--pk-accent-warm);
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-trust strong {
    color: var(--pk-surface);
    font-weight: 600;
}

.pk-booking-contact {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    list-style: none;
}

.pk-booking-contact li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    font-size: 13px;
}

.pk-booking-contact li:last-child {
    margin-bottom: 0;
}

.pk-booking-contact svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    stroke: var(--pk-accent-warm);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-booking-contact a {
    color: var(--pk-surface);
    font-weight: 600;
    text-decoration: none;
}

.pk-booking-contact a:hover,
.pk-booking-contact a:focus {
    color: var(--pk-accent-warm);
    text-decoration: underline;
}

/* --- Detail: bottom CTA band ---------------------------------------------- */

.pk-cta-band {
    background: var(--pk-deep);
    color: var(--pk-surface);
}

.pk-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding-top: 52px;
    padding-bottom: 52px;
}

.pk-cta-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--pk-accent-warm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.pk-cta-copy h2 {
    margin: 0;
    max-width: 18ch;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(27px, 3.2vw, 40px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.pk-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
}

.pk-cta-primary,
.pk-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.pk-cta-primary {
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
    border: 1.5px solid var(--pk-coral-surface);
}

.pk-cta-primary:hover,
.pk-cta-primary:focus {
    background: #a83a19;
    border-color: #a83a19;
    color: var(--pk-surface);
    text-decoration: none;
}

.pk-cta-secondary {
    background: transparent;
    color: var(--pk-surface);
    border: 1.5px solid rgba(255, 255, 255, .45);
}

.pk-cta-secondary:hover,
.pk-cta-secondary:focus {
    background: rgba(255, 255, 255, .12);
    border-color: var(--pk-surface);
    color: var(--pk-surface);
    text-decoration: none;
}

.pk-cta-primary svg,
.pk-cta-secondary svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Detail: related trips ------------------------------------------------ */

.pk-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pk-related-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    background: var(--pk-surface);
    color: var(--pk-ink);
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease;
}

.pk-related-card:hover,
.pk-related-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(14, 48, 44, .14);
    color: var(--pk-ink);
    text-decoration: none;
}

.pk-related-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.pk-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.pk-related-card:hover .pk-related-media img {
    transform: scale(1.05);
}

.pk-related-body {
    display: block;
    padding: 18px 20px 20px;
}

.pk-related-region {
    display: block;
    margin-bottom: 8px;
    color: var(--pk-sea-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pk-related-title {
    display: block;
    margin-bottom: 10px;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
}

.pk-related-date {
    display: block;
    color: var(--pk-muted);
    font-size: 13px;
}

/* --- Detail: responsive additions ----------------------------------------- */

@media (max-width: 991px) {
    .pk-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .pk-checklist ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pk-cta-inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .pk-cta-actions {
        width: 100%;
    }

    .pk-cta-primary,
    .pk-cta-secondary {
        flex: 1 1 100%;
        justify-content: center;
    }

    .pk-related-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* --- Detail: revised layout (prices right, program left) ------------------ */

/* The arrangement price list now lives in the sidebar, so it needs more room
   than the proposal's 340px to fit "23-28 putnika / 1.050,00 €" plus the
   anchor line without wrapping. */
/* 420px umjesto 380: "23-28 putnika" i oznaka "najpovoljnije" stanu u isti
   redak, a glavni stupac i dalje ima 836px (opis dana 548px uz fotografiju). */
.pk-detail-grid {
    grid-template-columns: 1fr 420px;
}

/* The map is supporting material for the day list, not the headline of the
   section - the proposal gives the route a modest strip above the programme.
   It now sits inside the ~876px main column rather than the full rail. */
/* front.css has `#map{height:50vh}` and `#map{height:30vh}` - ID selectors, so
   they outrank any .pk-detail-map class rule no matter the load order. That
   fixed height fought the aspect-ratio and left the map a small square while
   the day photos beside it spanned the full column. The ID is included here to
   win; everything else stays on the class. */
#map.pk-detail-map {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 6;
    /* Floor lives here, not in a later rule: a trailing base declaration would
       come after the 767 block and quietly undo its taller minimum. */
    min-height: 200px;
    max-height: 330px;
    margin-bottom: 36px;
}

/* The API injects its own absolutely-positioned wrapper; it must track the
   container rather than the 0-height it sees before layout settles. */
#map.pk-detail-map > div {
    width: 100% !important;
    height: 100% !important;
}

/* The programme, prices and includes now share one column, so the day list
   needs a closing edge before the next block starts. */
/* Jedinstveni ritam glavnog stupca: svi veliki blokovi su 44px razmaknuti.
   Prije su bili 44 / 34 / 20, pa su sekcije izgledale nasumicno razmaknute. */
.pk-itinerary {
    margin-bottom: 44px;
}

/* --- Detail: sidebar tier table ------------------------------------------- */

/* Longhand: media queries below override only the horizontal padding, and a
   shorthand here would be re-applied in full by any later shorthand edit. */
/* Gornji razmak odvaja zaglavlje tablice od cijene iznad; bez njega crta ispod
   "BROJ PUTNIKA / CIJENA" sjeda preblizu iznosu. */
/* Cjenik u okviru s vlastitim zaglavljem, kao u prijedlogu - tamo je okvir na
   bijeloj kartici, ovdje na tamnoj, pa se linija i traka zaglavlja crtaju
   prozirnom bijelom umjesto bojom papira. Okvir odvaja cjenik od iznosa iznad
   i od doplata ispod, koji su prije tekli u jednom nizu. */
.pk-tiers {
    margin: 0;
}

/* Bez punog okvira: traka zaglavlja gore i crta dolje dovoljno omeduju blok,
   a dva okvira jedan ispod drugog davala su dvostruku liniju. */
.pk-tiers-box {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.pk-tiers-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.pk-tiers-table th {
    padding: 9px 24px;
    background: rgba(255, 255, 255, .05);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
}

.pk-tiers-table td {
    padding: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--pk-on-night);
    font-size: 13.5px;
    line-height: 1.35;
    vertical-align: top;
}

/* Prvi redak vec ima liniju zaglavlja iznad sebe. */
.pk-tiers-table tbody tr:first-child td {
    border-top: none;
}

.pk-tier-amount {
    text-align: right;
    white-space: nowrap;
}

.pk-tiers-table td.pk-tier-amount strong {
    display: block;
    color: var(--pk-surface);
    font-size: 15px;
    font-weight: 700;
}

/* The cheapest tier is what the headline "vec od" figure refers to, so it is
   marked rather than left for the reader to work out. */
.pk-tier-best td {
    background: rgba(242, 168, 126, .09);
}

.pk-tier-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(242, 168, 126, .18);
    color: var(--pk-accent-warm);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* Sidrena cijena (NN 101/2026) uz svaku prikazanu cijenu, tiho. */
.pk-tier-anchor {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    font-weight: 400;
}

.pk-tier-note {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .55);
    font-size: 11.5px;
}

.pk-tier-request {
    color: rgba(255, 255, 255, .7);
    font-style: italic;
    font-size: 13.5px;
}


/* --- Detail: itinerary reworked to the proposal's day rows ---------------- */

/* Photo left, copy right, separated by hairlines. Replaces the spine-and-dot
   timeline: with a photo in every row the spine had nothing to align to and
   the description was squeezed into the remaining width. */
.pk-itinerary {
    border-top: 1px solid var(--pk-line);
}

.pk-itinerary::before {
    content: none;
}

.pk-itinerary-day {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid var(--pk-line);
}

/* Without a photo the copy takes the full row rather than leaving a hole. */
.pk-itinerary-day--nophoto {
    grid-template-columns: 1fr;
}

.pk-itinerary-media {
    position: relative;
    margin: 0;
    max-width: none;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.pk-itinerary-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Day number rides the photo as a tag, as in the proposal. */
.pk-itinerary-marker {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    flex-direction: row;
    gap: 5px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    border: 0;
    border-radius: 3px;
    background: var(--pk-coral-surface);
    box-shadow: none;
}

.pk-itinerary-marker small,
.pk-itinerary-marker span {
    color: var(--pk-surface);
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}

/* With no photo the tag has nothing to sit on, so it returns to the flow. */
.pk-itinerary-day--nophoto .pk-itinerary-marker {
    position: static;
    align-self: flex-start;
    margin-bottom: 12px;
}

.pk-itinerary-body {
    padding-top: 0;
    min-width: 0;
}

/* Date above the title, as a teal kicker. */
.pk-itinerary-head {
    display: block;
    margin-bottom: 10px;
}

.pk-itinerary-date {
    display: block;
    margin: 0 0 6px;
    color: var(--pk-sea-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: normal;
}

.pk-itinerary-head h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.pk-itinerary-body .pk-rte {
    color: var(--pk-muted);
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 1100px) {
    .pk-detail-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 767px) {
    .pk-itinerary-day {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 0;
    }

    .pk-itinerary-media {
        max-width: none;
    }

    .pk-itinerary-head h3 {
        font-size: 20px;
    }

    /* Taller than wide on a phone: the routes span several countries, so a
       squat strip leaves the pins crammed together. max-height would letterbox
       it inside the column, so the ratio alone decides the height. */
    #map.pk-detail-map {
        aspect-ratio: 1 / 1;
        max-height: 70vh;
        min-height: 320px;
        margin-bottom: 30px;
    }

    .pk-tiers {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --- Detail: narrow-viewport corrections ---------------------------------- */

/* The itinerary row kept its 260px photo track from 1100px down to 768px,
   where the copy beside it had dropped to ~430px. Stack earlier, while the
   photo still has room to be worth showing. */
@media (max-width: 900px) {
    .pk-itinerary-day {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Stacked: the photo spans the column like the copy above it, instead of
       sitting in a 360px box with dead space beside it. */
    .pk-itinerary-media {
        max-width: none;
        aspect-ratio: 16 / 9;
    }
}

/* The homepage rails drop to an 18px gutter at 700px; the detail rail was
   still on 24px at every width, so the two pages disagreed on phones. */
@media (max-width: 700px) {
    .pk-detail-rail {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pk-cta-inner {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Below ~360px the tier label and the amount stop fitting on one line inside
   the card's own 24px padding, so both are eased and the anchor moves under
   the amount rather than competing with it for width. */
@media (max-width: 420px) {
    /* Trake su full-bleed; razmak je na celijama, pa se sazima ondje. */
    .pk-tiers-table th,
    .pk-tiers-table td,
    .pk-extras-head,
    .pk-extras li {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pk-booking-when,
    .pk-booking-price,
    .pk-booking-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pk-extras-box {
        margin-left: -18px;
        margin-right: -18px;
    }

    .pk-tiers-table td,
    .pk-tiers-table th {
        font-size: 12.5px;
    }

    .pk-tiers-table td.pk-tier-amount strong {
        font-size: 14px;
    }

    .pk-tier-tag {
        /* On its own line: inline it would push the amount off the row. */
        display: block;
        margin: 4px 0 0;
        width: fit-content;
    }
}

/* The booking card is capped at 420px below 1100px so it does not stretch
   across a tablet. That cap is already <= the rail on a phone, so it needs no
   further override - but the box must not overflow if the cap ever changes. */
/* Between 1100 and 768 the sidebar sits under a wide column, so the card is
   capped to keep it from stretching across a tablet. On a phone it should use
   the full column like every other block. */
/* Jedino mjesto gdje se kartica ogranicava. Prije su postojala tri pravila s
   razlicitim vrijednostima (2x 420px i 460px); pobjedivalo je zadnje, pa je
   kartica na tabletu bila sira od stupca u kojem stoji. */
@media (max-width: 1100px) {
    .pk-booking-card {
        max-width: 420px;
    }
}

@media (max-width: 767px) {
    .pk-booking-card,
    .pk-docs {
        max-width: none;
    }
}

/* Long unbroken strings (IBAN, e-mail, file names) are the usual cause of a
   horizontal scrollbar on a 320px screen. */
.pk-booking-contact a,
.pk-doc-name,
.pk-itinerary-body .pk-rte {
    overflow-wrap: break-word;
}

/* --- Detail: extras inside the price card --------------------------------- */

/* Uplate i doplate (rezervacija, 1/1 soba, polica) - three rows per trip, so
   they live beside the price instead of in a separate table in the main
   column. Each keeps its anchor price (NN 101/2026). */
/* Isti okvir i zaglavlje kao cjenik iznad, pa se dva popisa cijena citaju kao
   par umjesto kao jedan neprekinut niz redaka. */
/* Blok sjedi unutar .pk-booking-body koji ima 24px razmaka; negativna margina
   vraca traku zaglavlja na rub kartice, poravnatu s cjenikom iznad. */
.pk-extras-box {
    margin: 0 -24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.pk-extras-head {
    padding: 9px 24px;
    background: rgba(255, 255, 255, .05);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pk-extras {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pk-extras li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13.5px;
}

.pk-extras li:first-child {
    border-top: none;
}

.pk-extra-label {
    min-width: 0;
}

.pk-extra-unit {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .55);
    font-size: 11.5px;
}

.pk-extra-amount {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.pk-extra-amount strong {
    color: var(--pk-surface);
    font-weight: 700;
}

.pk-extra-amount em {
    color: rgba(255, 255, 255, .7);
    font-style: italic;
}

.pk-extra-anchor {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    font-weight: 400;
}

/* --- Detail: map tooltip -------------------------------------------------- */

/* Sadrzaj Googleovog InfoWindowa. Google sam crta okvir i strelicu, pa se
   ovdje stilizira samo tekst unutra. */
.pk-map-tip {
    padding: 2px 4px 4px;
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    max-width: 240px;
}

.pk-map-tip-day {
    display: block;
    margin-bottom: 3px;
    color: var(--pk-coral-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pk-map-tip-title {
    display: block;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    /* Naslovi su u bazi verzalom; ista logika kao u popisu po danima. */
    text-transform: lowercase;
}

.pk-map-tip-title::first-letter {
    text-transform: uppercase;
}

/* Googleov InfoWindow dolazi sa svojim okvirom dimenzioniranim za gumb za
   zatvaranje: fiksni unutarnji razmak, min-width i prazan pojas iznad teksta.
   Na kratkom sadrzaju to izgleda kao poluprazan prozor, pa se chrome stisce.
   Klase su Googleove i mogu se promijeniti uz verziju API-ja; ako prestanu
   vrijediti, prozorcic se samo vraca na zadani izgled. */
#map .gm-style-iw-c {
    padding: 12px 14px !important;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(14, 48, 44, .22);
}

/* Unutarnji omotac ima vlastiti padding i max-height sa scrollom. */
#map .gm-style-iw-d {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
}

/* Gumb za zatvaranje je 40x40 i rezervira prostor iznad teksta. */
#map .gm-style-iw-chr {
    height: 0;
    margin: 0;
}

#map .gm-style-iw-chr button {
    width: 22px !important;
    height: 22px !important;
    top: -2px !important;
    right: -2px !important;
    opacity: .45;
    transition: opacity .18s ease;
}

#map .gm-style-iw-chr button:hover,
#map .gm-style-iw-chr button:focus-visible {
    opacity: 1;
}

/* The global focus ring lands on Google's close button and boxes it in; the
   opacity change above already marks focus, so the ring is dropped here. */
#map .gm-style-iw-chr button:focus-visible {
    outline: none;
}

#map .gm-style-iw-chr button span {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}

/* Naslov (prazan kod nas) inace drzi redak visine iznad sadrzaja. */
#map .gm-style-iw-ch {
    padding: 0 !important;
}

/* --- Detail: documents ---------------------------------------------------- */

/* Kartice s ikonom, nazivom i vrstom/velicinom, kao u prijedlogu. Prije su
   stajale u bocnom stupcu ispod cijene; sada su u glavnom stupcu, gdje imaju
   sirinu za puni naziv datoteke. */
.pk-docs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pk-doc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    background: var(--pk-surface);
    color: var(--pk-ink);
    text-decoration: none;
    transition: border-color .22s ease, background .22s ease;
}

.pk-doc:hover,
.pk-doc:focus {
    border-color: var(--pk-coral-surface);
    background: var(--pk-paper2);
    color: var(--pk-ink);
    text-decoration: none;
}

.pk-doc-tile {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: var(--pk-paper2);
}

.pk-doc:hover .pk-doc-tile {
    background: var(--pk-surface);
}

.pk-doc-tile svg {
    width: 20px;
    height: 20px;
    stroke: var(--pk-coral-text);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-doc-name {
    flex: 1;
    min-width: 0;
}

.pk-doc-title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.pk-doc-meta {
    display: block;
    margin-top: 2px;
    color: var(--pk-muted);
    font-size: 12.5px;
}

.pk-doc-dl {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    stroke: var(--pk-ink);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 480px) {
    .pk-doc {
        gap: 12px;
        padding: 12px 14px;
    }

    .pk-doc-tile {
        width: 34px;
        height: 34px;
    }

    .pk-doc-tile svg {
        width: 17px;
        height: 17px;
    }
}

/* Manja varijanta zaglavlja unutar glavnog stupca: isti numerirani ritam kao
   "01 / Plan putovanja", ali naslov ne konkurira onom na vrhu sekcije. */
.pk-detail-head--sub {
    margin-bottom: 18px;
}

.pk-detail-head--sub h2 {
    font-size: clamp(22px, 2.2vw, 28px);
}

/* --- Breadcrumbs ---------------------------------------------------------- */

/* Bootstrap crta sivu pilulu (#f5f5f5, radius 4px) i plavu poveznicu, a
   front.css je ogranicava na 1170px - ni jedno ne odgovara ostatku stranice.
   Widget zadrzava svoju .breadcrumb klasu, pa se ona ovdje ponistava. */
.pk-crumbs {
    border-bottom: 1px solid var(--pk-line);
    background: var(--pk-paper);
}

.pk-crumbs-rail {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

.pk-crumbs .breadcrumb,
.pk-crumbs .pk-crumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    max-width: none;
    margin: 0;
    padding: 12px 0;
    background: none;
    border-radius: 0;
    list-style: none;
    font-size: 12.5px;
}

.pk-crumbs li {
    display: inline-flex;
    align-items: center;
    color: var(--pk-muted);
}

/* Separator umjesto Bootstrapovog "/" u :before s fiksnom bojom. */
.pk-crumbs li + li::before {
    content: "";
    width: 4px;
    height: 4px;
    margin: 0 10px;
    border-radius: 50%;
    background: var(--pk-line);
}

.pk-crumbs a {
    color: var(--pk-sea-text);
    text-decoration: none;
}

.pk-crumbs a:hover,
.pk-crumbs a:focus {
    color: var(--pk-coral-text);
    text-decoration: underline;
}

/* Zadnja stavka je trenutna stranica; ne treba isticanje. */
.pk-crumbs .pk-crumb-active,
.pk-crumbs .active {
    color: var(--pk-ink);
    font-weight: 500;
}

@media (max-width: 700px) {
    .pk-crumbs-rail {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pk-crumbs .breadcrumb,
    .pk-crumbs .pk-crumbs-list {
        padding: 10px 0;
        font-size: 12px;
    }
}

/* --- Booking: prijava na putovanje ---------------------------------------- */

/* Prijava koristi isti raster kao detalj putovanja (.pk-detail-rail /
   .pk-detail-grid / .pk-booking-card), pa se ovdje opisuje samo ono sto je
   svojstveno obrascu. Stara pravila u front.css-u (plavi .btn-primary, bijele
   .form-control kutije bez ruba, #booking-payment) pisana su prije ove palete,
   pa ih pk- klase nadjacavaju - gdje je original ID selektor, i ovdje stoji ID
   jer se klasom ne moze pobijediti. */

/* Zaglavlje je namjerno bez fotografije: na detalju putovanja slika je poziv
   na putovanje, a ovdje bi odvlacila od obrasca. Ostaje topli papir i ista
   tipografija kao u hero bloku. */
.pk-book-head {
    padding: 34px 0 30px;
    background: var(--pk-paper);
}

.pk-book-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--pk-sea-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.pk-book-back:hover,
.pk-book-back:focus {
    color: var(--pk-coral-text);
    text-decoration: none;
}

.pk-book-back svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-book-title {
    margin: 0 0 12px;
    max-width: 20ch;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.pk-book-lead {
    margin: 0;
    max-width: 62ch;
    color: var(--pk-muted);
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 300;
    line-height: 1.6;
}

.pk-book-lead strong {
    color: var(--pk-ink);
    font-weight: 600;
}

/* --- Booking: koraci ------------------------------------------------------ */

.pk-book-step {
    margin-bottom: 40px;
}

.pk-book-step:last-of-type {
    margin-bottom: 32px;
}

.pk-book-step-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

/* Isti brojcani ritam kao kickeri ("01 / Ponuda") na naslovnici, ali kao krug
   jer ovdje broj oznacava korak, a ne redni broj sekcije. */
.pk-book-step-no {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

.pk-book-step-head h2 {
    margin: 0 0 4px;
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.15;
}

.pk-book-step-head p {
    margin: 0;
    color: var(--pk-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Bijeli panel na papirnatoj podlozi: obrazac se cita kao dokument koji se
   ispunjava, odvojen od pozadine sekcije. */
.pk-book-panel {
    padding: 26px 28px 28px;
    border: 1px solid var(--pk-line);
    border-radius: 10px;
    background: var(--pk-surface);
}

/* --- Booking: polja ------------------------------------------------------- */

.pk-field {
    margin-bottom: 20px;
}

.pk-book-panel .pk-field:last-child {
    margin-bottom: 0;
}

/* Skrivena polja (code, dateFrom, dateTo) nose .form-group s marginom, pa bi
   inace ostavila tri prazna razmaka na vrhu obrasca. */
.pk-book-form .form-group:has(> input[type="hidden"]) {
    margin: 0;
}

.pk-field > label,
.pk-field .control-label {
    display: block;
    margin-bottom: 7px;
    color: var(--pk-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* front.css ima `input.form-control{height:40px;border:none;border-radius:0}`
   - selektor s elementom, pa se ovdje pobjeduje istom tezinom plus klasom. */
.pk-book-form input.form-control,
.pk-book-form .pk-field input[type="text"],
.pk-book-form .pk-field input[type="email"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 48px;
    padding: 5px 15px;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    background: var(--pk-paper);
    color: var(--pk-ink);
    font-family: inherit;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pk-book-form input.form-control::placeholder {
    color: var(--pk-muted);
    opacity: .85;
}

.pk-book-form input.form-control:focus {
    outline: none;
    border-color: var(--pk-sea);
    background: var(--pk-surface);
    box-shadow: 0 0 0 3px rgba(44, 133, 151, .18);
}

/* Dva polja u redu (telefon / email). Zamjenjuje Bootstrapov .row/.col-lg-6,
   koji je nosio vlastite negativne margine. */
.pk-book-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.pk-field-hint {
    margin-top: 7px;
    color: var(--pk-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pk-field-hint strong {
    color: var(--pk-coral-text);
    font-weight: 600;
}

/* Prazan .help-block Yii ispisuje uz svako polje; dok nema poruke ne smije
   zauzimati redak. */
.pk-field-error {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.pk-field-error:not(:empty) {
    margin-top: 7px;
    color: #b3261e;
}

.pk-book-form .has-error input.form-control {
    border-color: #b3261e;
    background: #fdf6f5;
}

.pk-book-form .has-error input.form-control:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}

.pk-book-form .has-error .control-label,
.pk-book-form .has-error .help-block {
    color: #b3261e;
}

/* --- Booking: izbor (nacin placanja) -------------------------------------- */

.pk-field--choice {
    margin-bottom: 22px;
}

.pk-book-panel .pk-field--choice:last-child {
    margin-bottom: 0;
}

/* Polica otkaza je zasebno pitanje, ne nastavak nacina placanja: tanka crta i
   veci razmak inace se hint iznad i labela ispod citaju kao jedan blok. */
.pk-book-panel .pk-field--choice + .pk-field--choice {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--pk-line);
}

.pk-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* front.css: `#booking-payment{display:flex}` i `#booking-payment label{...}`
   su ID selektori i nadjacali bi svaku klasu, pa se ID ponavlja ovdje. */
#booking-payment.pk-choice-grid {
    display: grid;
    overflow: visible;
}

.pk-choice-input,
#booking-payment.pk-choice-grid input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pk-choice,
#booking-payment.pk-choice-grid label {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: auto;
    float: none;
    margin: 0;
    padding: 16px 17px;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    background: var(--pk-paper);
    color: var(--pk-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.pk-choice:hover,
#booking-payment.pk-choice-grid label:hover {
    border-color: var(--pk-sea);
    background: var(--pk-surface);
}

/* Oznaka A / B. front.css je ovdje imao `span{font-size:40px}`, sto je
   razbijalo redak - sada je to mali disk konstantne velicine. */
.pk-choice-mark,
#booking-payment.pk-choice-grid label span.pk-choice-mark {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: rgba(21, 48, 44, .08);
    color: var(--pk-ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    transition: background .18s ease, color .18s ease;
}

/* front.css ima `#booking-payment label span{font-size:40px;margin-right:20px}`
   - ID selektor koji pogada *svaki* span u kartici, pa i tekst opcije. Bez ovog
   pravila tekst se prikazuje u 40px. */
.pk-choice-text,
#booking-payment.pk-choice-grid label span.pk-choice-text {
    margin: 0;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

/* Odabrano stanje: koraljni rub i tanka sjena umjesto plave ispune iz
   front.css-a. Tekst ostaje taman na svijetlom - ispuna bojom bi ovdje
   trazila bijeli tekst na 14px, sto je ispod AA na svjetlijem koralju. */
.pk-choice-input:checked + .pk-choice,
#booking-payment.pk-choice-grid input[type="radio"]:checked + label {
    border-color: var(--pk-coral-surface);
    background: var(--pk-surface);
    box-shadow: 0 0 0 1px var(--pk-coral-surface), 0 6px 16px rgba(192, 77, 38, .12);
    color: var(--pk-ink);
}

.pk-choice-input:checked + .pk-choice .pk-choice-mark,
#booking-payment.pk-choice-grid input[type="radio"]:checked + label span.pk-choice-mark {
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
}

/* Fokus se crta na vidljivoj kartici jer je sam radio gumb skriven. */
.pk-choice-input:focus-visible + .pk-choice,
#booking-payment.pk-choice-grid input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--pk-sea);
    outline-offset: 2px;
}

/* --- Booking: Da / Ne ----------------------------------------------------- */

.pk-toggle-grid {
    display: flex;
    gap: 10px;
}

.pk-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pk-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    margin: 0;
    padding: 11px 22px;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    background: var(--pk-paper);
    color: var(--pk-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.pk-toggle:hover {
    border-color: var(--pk-sea);
    background: var(--pk-surface);
}

.pk-toggle-input:checked + .pk-toggle {
    border-color: var(--pk-deep);
    background: var(--pk-deep);
    color: var(--pk-surface);
}

.pk-toggle-input:focus-visible + .pk-toggle {
    outline: 2px solid var(--pk-sea);
    outline-offset: 2px;
}

/* --- Booking: slanje ------------------------------------------------------ */

.pk-book-submit {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* front.css: `.btn-primary{background:#228ae6}` plus `.btn:hover{...}` - klasa
   .pk-book-btn nosi vlastiti izgled i ne koristi .btn uopce. */
.pk-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 0;
    border-radius: 4px;
    background: var(--pk-coral-surface);
    color: var(--pk-surface);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.pk-book-btn:hover,
.pk-book-btn:focus {
    background: #a83a19;
    color: var(--pk-surface);
    transform: translateY(-1px);
}

.pk-book-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-book-submit-note {
    flex: 1 1 260px;
    margin: 0;
    color: var(--pk-muted);
    font-size: 13px;
    line-height: 1.5;
}

.pk-book-submit-note strong {
    color: var(--pk-ink);
    font-weight: 600;
}

/* --- Booking: bocna kartica ----------------------------------------------- */

/* Fotografija na vrhu kartice vraca kontekst putovanja koje se prijavljuje;
   na detalju putovanja ta slika je vec hero, pa je ondje kartica nema. */
.pk-book-summary-media {
    position: relative;
    display: block;
    text-decoration: none;
}

.pk-book-summary-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.pk-book-summary-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 24px 16px;
    background: linear-gradient(180deg, rgba(7, 38, 44, 0) 0%, rgba(7, 32, 38, .88) 100%);
}

.pk-book-summary-region {
    display: block;
    margin-bottom: 3px;
    color: var(--pk-accent-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.pk-book-summary-title {
    display: block;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.pk-book-summary-media:hover .pk-book-summary-title,
.pk-book-summary-media:focus .pk-book-summary-title {
    color: var(--pk-accent-warm);
}

/* --- Booking: uske sirine -------------------------------------------------- */

@media (max-width: 991px) {
    .pk-book-head {
        padding: 26px 0 24px;
    }

    .pk-book-panel {
        padding: 22px 20px 24px;
    }
}

@media (max-width: 767px) {
    /* Dva polja u redu i dvije kartice placanja ne stanu jedna uz drugu na
       telefonu - oboje prelazi u jedan stupac. */
    .pk-book-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pk-choice-grid,
    #booking-payment.pk-choice-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pk-book-step-head {
        gap: 13px;
    }

    .pk-book-step-no {
        width: 33px;
        height: 33px;
        font-size: 13px;
    }

    .pk-book-step-head h2 {
        font-size: 22px;
    }

    .pk-book-btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .pk-book-panel {
        padding: 18px 16px 20px;
    }
}

/* ==========================================================================
   Kontakt
   ========================================================================== */

/* --- Kontakt: hero -------------------------------------------------------- */

/* Za razliku od naslovnice i detalja putovanja, ovdje nema fotografije: ploha
   u --pk-night nosi naslov sama. Isti postupak koristi i stranica Opcih
   uvjeta, pa dvije tekstualne stranice imaju jednak uvod. */
.pk-contact-hero {
    padding: 64px 0 56px;
    background: var(--pk-night);
}

.pk-contact-hero-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

.pk-contact-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--pk-accent-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.pk-contact-title {
    margin: 0;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.02em;
}

.pk-contact-lead {
    margin: 18px 0 0;
    max-width: 56ch;
    color: var(--pk-on-night);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 300;
    line-height: 1.6;
}

/* --- Kontakt: raster ------------------------------------------------------ */

.pk-contact {
    padding: 56px 0 72px;
    background: var(--pk-paper);
}

.pk-contact-rail {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pk-rail);
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

/* Obrazac dobiva nesto siri stupac od kartice: u njemu stoje dva polja jedno
   uz drugo, dok kartica nosi samo retke oznaka i vrijednosti. */
.pk-contact-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: start;
}

.pk-contact-grid--map {
    margin-top: 48px;
    align-items: stretch;
}

.pk-contact-h2 {
    margin: 0 0 8px;
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(27px, 3.2vw, 38px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--pk-ink);
}

.pk-contact-sub {
    margin: 0 0 30px;
    max-width: 46ch;
    color: var(--pk-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* --- Kontakt: obrazac ----------------------------------------------------- */

/* Polja dijele izgled s obrascem prijave na putovanje. Selektori ondje su
   vezani na .pk-book-form, pa se isti izgled ovdje ponavlja umjesto da se
   .pk-book-form dodaje na kontakt obrazac - ta klasa nosi i raspored koraka,
   koje ova stranica nema. */
.pk-contact-form .pk-field {
    margin-bottom: 20px;
}

.pk-contact-form .pk-field > label,
.pk-contact-form .pk-field .control-label {
    display: block;
    margin-bottom: 8px;
    color: var(--pk-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* front.css ima `input.form-control{height:40px;border:none;border-radius:0}`
   - selektor s elementom, pa se i ovdje pobjeduje istom tezinom plus klasom. */
.pk-contact-form input.form-control,
.pk-contact-form textarea.form-control {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    background: var(--pk-surface);
    color: var(--pk-ink);
    font-family: inherit;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pk-contact-form input.form-control {
    height: 48px;
}

.pk-contact-form textarea.form-control {
    min-height: 150px;
    line-height: 1.6;
    resize: vertical;
}

.pk-contact-form .form-control::placeholder {
    color: var(--pk-muted);
    opacity: .85;
}

.pk-contact-form .form-control:focus {
    outline: none;
    border-color: var(--pk-sea);
    box-shadow: 0 0 0 3px rgba(44, 133, 151, .18);
}

.pk-contact-form .has-error input.form-control,
.pk-contact-form .has-error textarea.form-control {
    border-color: #b3261e;
    background: #fdf6f5;
}

.pk-contact-form .has-error input.form-control:focus,
.pk-contact-form .has-error textarea.form-control:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}

.pk-contact-form .has-error .control-label,
.pk-contact-form .has-error .help-block {
    color: #b3261e;
}

/* Prazan .help-block Yii ispisuje uz svako polje; dok nema poruke ne smije
   zauzimati redak. */
.pk-contact-form .pk-field-error {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.pk-contact-form .pk-field-error:not(:empty) {
    margin-top: 7px;
    color: #b3261e;
}

/* Ime i email stoje u jednom redu; Bootstrapov .row/.col nosi negativne
   margine koje bi ovdje razbile raster. */
.pk-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

/* --- Kontakt: captcha ----------------------------------------------------- */

.pk-captcha {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}

/* Slika koda stoji na plohi koja je za ton dublja od polja pokraj nje, pa se
   cita kao zadatak a ne kao jos jedno polje za upis. */
.pk-captcha-img {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    background: var(--pk-paper2);
}

/* Yii crta kod na bijeloj podlozi; multiply je stapa s plohom ispod, pa slika
   nema vlastiti bijeli pravokutnik unutar okvira. */
.pk-captcha-img img {
    display: block;
    height: 40px;
    width: auto;
    cursor: pointer;
    mix-blend-mode: multiply;
}

.pk-captcha-input {
    flex: 1 1 180px;
    min-width: 0;
}

/* --- Kontakt: slanje i poruke --------------------------------------------- */

.pk-contact-submit {
    margin-top: 4px;
}

/* Potvrda i greska nakon slanja. Ikona i tekst dijele isti redak, poravnati na
   visinu prvog retka teksta. */
.pk-contact-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid;
    border-radius: 8px;
}

.pk-contact-flash p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
}

.pk-contact-flash svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-contact-flash--ok {
    border-color: rgba(44, 133, 151, .32);
    background: #eef6f7;
    color: var(--pk-ink);
}

.pk-contact-flash--ok svg {
    stroke: var(--pk-sea-text);
}

.pk-contact-flash--err {
    border-color: rgba(179, 38, 30, .3);
    background: #fdf6f5;
    color: #b3261e;
}

.pk-contact-flash--err svg {
    stroke: #b3261e;
}

/* --- Kontakt: kartica ----------------------------------------------------- */

.pk-contact-aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pk-contact-card {
    overflow: hidden;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    background: var(--pk-surface);
    box-shadow: 0 14px 40px rgba(14, 48, 44, .08);
}

.pk-contact-card-head {
    padding: 22px 26px;
    background: var(--pk-deep);
}

.pk-contact-card-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--pk-accent-warm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.pk-contact-card-name {
    display: block;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.pk-contact-rows {
    margin: 0;
    padding: 6px 26px 18px;
    list-style: none;
}

.pk-contact-rows > li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--pk-line);
}

.pk-contact-rows > li:last-child {
    border-bottom: 0;
}

.pk-contact-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--pk-paper2);
}

.pk-contact-ico svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--pk-coral-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-contact-label {
    display: block;
    margin-bottom: 3px;
    color: var(--pk-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pk-contact-value {
    display: block;
    color: var(--pk-ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}

.pk-contact-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--pk-line);
    transition: color .18s ease, border-color .18s ease;
}

.pk-contact-value a:hover,
.pk-contact-value a:focus {
    color: var(--pk-coral-text);
    border-bottom-color: currentColor;
}

/* --- Kontakt: podaci o tvrtki --------------------------------------------- */

.pk-contact-company {
    padding: 24px 26px;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    background: var(--pk-paper2);
}

.pk-contact-company-head {
    display: block;
    margin-bottom: 16px;
    color: var(--pk-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* Svaki par stoji u vlastitom <div> unutar <dl>, pa se oznaka i vrijednost
   mogu razvuci na suprotne rubove retka. */
.pk-contact-dl {
    margin: 0;
}

.pk-contact-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 5px 0;
    font-size: 13.5px;
    line-height: 1.5;
}

.pk-contact-dl dt {
    flex: 0 0 auto;
    color: var(--pk-muted);
    font-weight: 400;
}

.pk-contact-dl dd {
    margin: 0;
    color: var(--pk-ink);
    font-weight: 600;
    text-align: right;
}

/* Ime direktora zapocinje drugu skupinu (osobe umjesto brojeva tvrtke). */
.pk-contact-dl-sep {
    margin-top: 6px;
    padding-top: 11px;
    border-top: 1px solid var(--pk-line);
}

.pk-contact-registar {
    margin: 11px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--pk-line);
    color: var(--pk-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* --- Kontakt: karta i obavijesti ------------------------------------------ */

.pk-contact-map {
    overflow: hidden;
    min-height: 340px;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    background: var(--pk-paper2);
}

.pk-contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
}

.pk-contact-notices {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Zakonske obavijesti nisu isto sto i .pk-callout na detalju putovanja: ondje
   obavijest prekida program putovanja pa nosi obojenu plohu, a ovdje dvije
   stoje jedna uz drugu kao mirni zavrsetak stranice. Zato vlastite klase -
   bijela ploha, naslov u verzalu i tekst u --pk-muted - umjesto preslagivanja
   .pk-callout, koji ostaje kakav jest za detalj putovanja. */
.pk-notice {
    padding: 24px 26px;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    background: var(--pk-surface);
}

/* Naslov je <h2> zbog redoslijeda naslova na stranici (h1 Kontakt), ali se
   cita kao oznaka: front.css ga inace crta u Newsreaderu na 2.369em. */
.pk-notice-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: var(--pk-ink);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pk-notice-ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pk-notice-ico--warn {
    stroke: var(--pk-coral-text);
}

.pk-notice-ico--info {
    stroke: var(--pk-sea-text);
}

.pk-notice p {
    margin: 0;
    color: var(--pk-muted);
    font-size: 14px;
    line-height: 1.65;
}

.pk-notice p strong {
    color: var(--pk-ink);
    font-weight: 600;
}

/* --- Kontakt: responzivno ------------------------------------------------- */

@media (max-width: 1000px) {
    .pk-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Obrazac ostaje prvi i na uskom zaslonu, pa se ne preslaguje nista:
       u izvoru vec stoji prije kartice s podacima. */
}

@media (max-width: 700px) {
    .pk-contact-hero {
        padding: 44px 0 38px;
    }

    .pk-contact {
        padding-top: 38px;
        padding-bottom: 52px;
    }

    .pk-contact-hero-inner,
    .pk-contact-rail {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Dva polja jedno ispod drugog; 1fr 1fr na 320px daje polja od 140px. */
    .pk-contact-row {
        grid-template-columns: 1fr;
    }

    .pk-contact-card-head,
    .pk-contact-rows,
    .pk-contact-company {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Oznaka i vrijednost u podacima o tvrtki ne stanu u isti redak. */
    .pk-contact-dl > div {
        display: block;
    }

    .pk-contact-dl dd {
        text-align: left;
    }

    .pk-contact-form .pk-book-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   Opci uvjeti poslovanja
   ========================================================================== */

/* --- Uvjeti: hero --------------------------------------------------------- */

/* Ista ploha kao na Kontaktu: dvije tekstualne stranice dijele uvod, pa se
   razlikuju samo po naslovu. */
.pk-terms-hero {
    padding: 64px 0 56px;
    background: var(--pk-night);
}

.pk-terms-hero-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

.pk-terms-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--pk-accent-warm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.pk-terms-title {
    margin: 0;
    max-width: 20ch;
    color: var(--pk-surface);
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(32px, 4.4vw, 56px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.02em;
}

.pk-terms-lead {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    line-height: 1.6;
}

/* --- Uvjeti: raster ------------------------------------------------------- */

.pk-terms {
    padding: 56px 0 96px;
    background: var(--pk-paper);
}

.pk-terms-rail {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
    align-items: start;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--pk-gutter);
}

/* --- Uvjeti: sadrzaj sa strane -------------------------------------------- */

/* Zaglavlje stranice je fiksno (.navbar), pa sticky mora krenuti ispod njega;
   ista vrijednost stoji i u scroll-margin-top clanaka da sidro ne zavuce
   naslov pod traku. */
.pk-terms-toc {
    position: sticky;
    top: 96px;
}

.pk-terms-toc-head {
    display: block;
    margin-bottom: 14px;
    color: var(--pk-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pk-terms-toc-nav {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--pk-line);
}

.pk-terms-toc-nav a {
    margin-left: -1px;
    padding: 6px 0 6px 16px;
    border-left: 2px solid transparent;
    color: var(--pk-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
}

.pk-terms-toc-nav a:hover,
.pk-terms-toc-nav a:focus {
    color: var(--pk-coral-text);
    border-left-color: var(--pk-coral);
}

.pk-terms-toc-deep {
    margin-top: 6px;
    color: var(--pk-deep) !important;
    font-weight: 600 !important;
}

/* --- Uvjeti: clanci ------------------------------------------------------- */

.pk-terms-body {
    min-width: 0;
    max-width: 760px;
}

.pk-terms-article {
    margin-bottom: 38px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--pk-line);
    scroll-margin-top: 96px;
}

/* Broj i rijec "Clanak" dijele osnovnu liniju: broj je velik i u serifu, a
   rijec uz njega sitna oznaka - obrnuto od izvornog <h3>CLANAK 1.</h3>. */
.pk-terms-article-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}

.pk-terms-no {
    color: var(--pk-coral-text);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
}

/* front.css crta h2 u Newsreaderu na 2.369em; ovdje je to oznaka. */
.pk-terms-article-head h2 {
    margin: 0;
    color: var(--pk-deep);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.pk-terms-article p {
    margin: 0 0 16px;
    color: var(--pk-ink);
    font-size: 15.5px;
    line-height: 1.75;
}

.pk-terms-article p:last-child {
    margin-bottom: 0;
}

/* Tocka u koralju umjesto zadanog markera; list-style se gasi da se marker i
   vlastita tocka ne udvoje. */
.pk-terms-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pk-terms-list li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 24px;
    color: var(--pk-ink);
    font-size: 15px;
    line-height: 1.6;
}

.pk-terms-list li:last-child {
    margin-bottom: 0;
}

.pk-terms-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pk-coral);
}

/* --- Uvjeti: polica privatnosti ------------------------------------------- */

.pk-terms-privacy {
    scroll-margin-top: 96px;
}

.pk-terms-privacy h2 {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--pk-ink);
    color: var(--pk-ink);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.pk-terms-privacy p {
    margin: 0 0 16px;
    color: var(--pk-ink);
    font-size: 15.5px;
    line-height: 1.75;
}

/* --- Uvjeti: zavrsne poveznice -------------------------------------------- */

.pk-terms-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

/* .pk-book-btn je <button> na obrascima, ovdje je <a>: poravnanje i visina
   retka inace se razlikuju od inacice s gumbom. */
.pk-terms-cta .pk-book-btn {
    line-height: 1;
    text-decoration: none;
}

.pk-terms-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 13px 24px;
    border: 1.5px solid var(--pk-ink);
    border-radius: 4px;
    background: none;
    color: var(--pk-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.pk-terms-btn-ghost:hover,
.pk-terms-btn-ghost:focus {
    background: var(--pk-ink);
    color: var(--pk-surface);
}

/* --- Uvjeti: responzivno -------------------------------------------------- */

@media (max-width: 900px) {
    .pk-terms-rail {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Sticky stupac nema smisla kad je sadrzaj iznad teksta: popis se slaze u
       redak koji se lomi, pa ne zauzme pola zaslona prije prvog clanka. */
    .pk-terms-toc {
        position: static;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--pk-line);
    }

    .pk-terms-toc-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        border-left: 0;
    }

    .pk-terms-toc-nav a {
        margin-left: 0;
        padding: 7px 14px;
        border: 1px solid var(--pk-line);
        border-radius: 30px;
        background: var(--pk-surface);
        font-size: 13px;
    }

    .pk-terms-toc-nav a:hover,
    .pk-terms-toc-nav a:focus {
        border-color: var(--pk-coral);
    }

    .pk-terms-body {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .pk-terms-hero {
        padding: 44px 0 38px;
    }

    .pk-terms-hero-inner,
    .pk-terms-rail {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pk-terms {
        padding: 38px 0 60px;
    }

    .pk-terms-no {
        font-size: 28px;
    }

    .pk-terms-article p,
    .pk-terms-privacy p {
        font-size: 15px;
    }

    .pk-terms-privacy h2 {
        font-size: 26px;
    }

    .pk-terms-cta .pk-book-btn,
    .pk-terms-btn-ghost {
        justify-content: center;
        width: 100%;
    }
}

/* Zadnji element u glavnom stupcu, bez obzira koji je (dokumenti, obavijest
   ili program - ovisi sto putovanje ima): razmak do dna preuzima sekcija.
   Stoji na kraju datoteke jer mora nadjacati sva pravila blokova iznad. */
.pk-detail-main > *:last-child {
    margin-bottom: 0;
}