/* Brand tokens, base resets, .btn, .blog-card, .academia-footer now live in
   academia-shared.css (loaded before this file) - only London-specific
   sections stay here. */

.london-page .hero{padding-block:0 36px;}
/* Tried the same inset-from-edges treatment used on .blog-section/
   .team-carousel/.week-split/.photo-band/.faq-section here too, but this
   hero is different from those: it's min-height:100vh AND the fixed
   TRANSPARENT header (academia-header-transparent-hero) overlays it with
   no background of its own, relying entirely on the photo behind it for
   contrast. Insetting the photo 40px left/right left the page's plain
   light background showing through the transparent header at both edges,
   right behind the logo and nav - looked like a rendering glitch, not an
   inset card (confirmed with a screenshot, not just guessed). Reverted to
   full-bleed - full width is a real requirement here, not just the
   original default. */
.london-page .hero-photo{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:
    linear-gradient(180deg, rgba(7,15,23,.32) 0%, rgba(7,15,23,.68) 78%),
    url('../images/london-hero.jpg') center 28% / cover no-repeat;
  padding-block:64px;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
}
@media (max-width:600px){.london-page .hero-photo{padding-block:110px 40px;}}
.london-page .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;}
@media (max-width:920px){.london-page .hero-grid{grid-template-columns:1fr;}}
.london-page .hero-grid-solo{grid-template-columns:1fr; max-width:760px;}
.london-page .hero h1{font-size:clamp(2.3rem, 4.6vw, 3.56rem); font-weight:600; line-height:1.1; color:#fff;}
.london-page .hero-photo .eyebrow{color:#BFE7FF;}
.london-page .hero p.lede{color:rgba(255,255,255,.88); font-size:1.24rem; max-width:48ch; margin-top:16px;}
.london-page .hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

/* London 18+ hero - no gradient wash on the photo (per request, unlike the
   14+ hero above). text-shadow substitutes for the contrast a gradient
   would normally provide, same technique used on Online časovi's hero. */
.london-odrasli-page .hero-photo .eyebrow,
.london-odrasli-page .hero h1,
.london-odrasli-page .hero p.lede{
  text-shadow: 0 2px 14px rgba(5,10,16,.7), 0 1px 3px rgba(5,10,16,.9);
}
/* Kampovi u inostranstvu (hub) - hero on a bright photo, same text-shadow
   treatment instead of a gradient. */
.kampovi-page .hero-photo .eyebrow,
.kampovi-page .hero h1,
.kampovi-page .hero p.lede{
  color:#fff;
  text-shadow: 0 2px 18px rgba(5,10,16,.9), 0 1px 4px rgba(5,10,16,.98);
}
.kampovi-page .hero p.lede{font-weight:500;}
.kampovi-page .hero-photo .eyebrow{color:#fff; font-weight:700;}
/* header nav sits on the bright sky/palace - stronger shadow so it reads */
body.page-template-template-kampovi.academia-header-transparent-hero #masthead:not(.is-scrolled) .main-header-menu .menu-link{
  text-shadow: 0 1px 10px rgba(5,10,16,.85), 0 1px 3px rgba(5,10,16,.95);
}
.kampovi-page .kampovi-destinacije, .kursevi-page .kampovi-destinacije{padding-block:64px;}
.kursevi-page .hero-photo .eyebrow, .kursevi-page .hero h1, .kursevi-page .hero p.lede{text-shadow: 0 2px 14px rgba(5,10,16,.8), 0 1px 3px rgba(5,10,16,.95);}
.kursevi-page .hero-photo .eyebrow{color:#fff; font-weight:700;}
/* KONTAKT stranica */
.kontakt-page .kontakt-head{padding-block:150px 8px;}
.kontakt-page .kontakt-head h1{font-size:clamp(2.2rem,4.4vw,3.2rem); font-weight:600;}
.kontakt-page .kontakt-lede{margin:10px 0 0; color:var(--ink-soft); font-size:1.17rem;}
.kontakt-page .kontakt-main{padding-block:64px;}
.kontakt-page .kontakt-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:start;}
@media (max-width:860px){.kontakt-page .kontakt-grid{grid-template-columns:1fr; gap:28px;}}
.kontakt-page .kontakt-cards{display:grid; gap:16px;}
.kontakt-page .kontakt-card{display:flex; align-items:center; gap:18px; padding:22px 24px; background:var(--card-bg); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink); transition:transform .2s ease, border-color .2s ease;}
.kontakt-page a.kontakt-card:hover{transform:translateY(-3px); border-color:var(--teal);}
.kontakt-page .kontakt-icon{flex:none; width:52px; height:52px; border-radius:14px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;}
.kontakt-page .kontakt-card-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.kontakt-page .kontakt-k{font-family:'JetBrains Mono',monospace; font-size:0.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.kontakt-page .kontakt-card strong{font-family:var(--font-display, 'Fraunces', serif); font-size:1.5rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere;}
.kontakt-page .kontakt-chat{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.kontakt-page .kontakt-chat a{padding:7px 18px; border-radius:999px; border:1px solid var(--line); font-weight:600; text-decoration:none; color:var(--ink); background:var(--ground);}
.kontakt-page .kontakt-chat a:hover{border-color:var(--teal); color:var(--teal-deep);}
.kontakt-page .kontakt-form-card{background:#FBEADA; border-radius:24px; padding:36px 34px;}
/* Studio "Pozadina sekcije" (tones): class lands on the outer <section class="kontakt-main">,
   but the visible card is this nested div - repeat the non-default tone colors on it. */
.kontakt-page .kontakt-main.studio-tone-sky .kontakt-form-card{background:#E3F2FB;}
.kontakt-page .kontakt-main.studio-tone-dark .kontakt-form-card{background:#132A3A;}
.kontakt-page .kontakt-form-card h2{font-size:clamp(1.7rem,3vw,2.2rem); margin-top:6px;}
.kontakt-page .kontakt-form-lede{color:var(--ink-soft); margin:8px 0 0;}
.kontakt-page .kontakt-form.cert-apply-form{max-width:none; margin:22px 0 0; padding:26px;}
@media (max-width:700px){.kontakt-page .kontakt-form-card{padding:28px 20px;} .kontakt-page .kontakt-card{padding:18px;} .kontakt-page .kontakt-card strong{font-size:1.25rem;}}
.kontakt-page .kontakt-quick{padding-block:40px 72px;}
.kontakt-page .kontakt-quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){.kontakt-page .kontakt-quick-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.kontakt-page .kontakt-quick-grid{grid-template-columns:1fr;}}
.kontakt-page .kontakt-quick-card{display:flex; flex-direction:column; gap:6px; padding:24px 22px; background:var(--card-bg); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink); transition:transform .2s ease, border-color .2s ease;}
.kontakt-page .kontakt-quick-card:hover{transform:translateY(-3px); border-color:var(--teal);}
.kontakt-page .kontakt-quick-card h3{font-size:1.2rem;}
.kontakt-page .kontakt-quick-card p{margin:0; color:var(--ink-soft); font-size:1rem;}
.kontakt-page .kontakt-quick-card .read{margin-top:auto; padding-top:8px; color:var(--teal-deep); font-weight:600;}
/* "Sigurno, organizovano i inspirativno" text block (London 18+ only) */
.london-odrasli-page .lp-story{padding-block:64px;}
.london-odrasli-page .lp-story-inner{max-width:760px; margin-inline:auto;}
.london-odrasli-page .lp-story-inner > p{color:var(--ink-soft); line-height:1.7; margin:0 0 16px; font-size:1.13rem;}
.london-odrasli-page .lp-story-inner .lp-story-lead{font-family:var(--font-display, 'Fraunces', serif); font-size:1.55rem; line-height:1.3; font-weight:600; color:var(--ink); margin:26px 0;}
.london-odrasli-page .lp-story-callout{margin-top:32px; padding:28px 30px; border-radius:18px; background:#FBEADA; text-align:center;}
/* Studio "Pozadina sekcije" (tones): class lands on the outer <section class="lp-story">, card is this nested div. */
.london-odrasli-page .lp-story.studio-tone-sky .lp-story-callout{background:#E3F2FB;}
.london-odrasli-page .lp-story.studio-tone-dark .lp-story-callout{background:#132A3A;}
.london-odrasli-page .lp-story-callout p{margin:0;}
.london-odrasli-page .lp-story-q{font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; font-size:0.9rem; color:var(--teal-deep);}
.london-odrasli-page .lp-story-a{font-family:var(--font-display, 'Fraunces', serif); font-size:1.7rem; font-weight:600; color:var(--ink); margin:8px 0 6px;}
.london-odrasli-page .lp-story-b{color:var(--ink-soft); font-size:1.13rem;}
@media (max-width:700px){.london-odrasli-page .lp-story-a{font-size:1.4rem;}}
.london-odrasli-page .hero-actions .btn-ghost{background:rgba(7,15,23,.35);}
.london-odrasli-page .hero-actions .btn-ghost:hover{background:rgba(7,15,23,.5);}

.london-page .ticket-strip{display:flex; margin-top:28px; border-radius:12px; overflow:hidden; background:var(--ground-raised); box-shadow:var(--shadow); flex-wrap:wrap;}
.london-page .ticket-strip div{padding:12px 16px; flex:1; min-width:105px; border-right:1px dashed var(--line);}
.london-page .ticket-strip div:last-child{border-right:none;}
.london-page .ticket-strip .k{display:block; font-size:0.736rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;}
.london-page .ticket-strip .v{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:0.989rem;}

/* .pass-hero (boarding-pass hero graphic) removed - hero is text-only now. */

/* Same inset-background rule as .blog-section/.team-carousel/.week-split
   (this one's the only .photo-band on the page, safe to change directly):
   photo card sits 40px from the real viewport edge on desktop instead of
   bleeding full-width. No separate "-inner" content wrapper needed here -
   .wrap and .journey-wrap (the two children) already cap their own width
   independently (1120px / 1400px, margin-inline:auto) regardless of how
   wide this outer band is, so nothing about the journey-step layout
   changes size, only the photo backdrop around it grows. */
.london-page .photo-band{padding-block:56px; position:relative; border-radius:28px;}
@media (min-width:701px){
  .london-page .photo-band{
    width:calc(100vw - 80px);
    margin-top:40px;
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .photo-band{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0;}
}
.london-page .photo-band-building{background: url('../images/london-week-strip.jpg') center top/cover no-repeat;}
.london-page .photo-band .section-head .eyebrow{color:#BFE7FF;}
.london-page .photo-band .section-head h2{color:#fff;}
.london-page .photo-band .section-head p:not(.eyebrow){color:rgba(255,255,255,.85);}

.london-page .cena-merge{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
@media (max-width:860px){.london-page .cena-merge{grid-template-columns:1fr; gap:32px;}}
/* left column grew a lot (price + the new about-program paragraphs) -
   pin the form so it stays in view while that text scrolls past, instead
   of sitting stranded at the top with empty space growing beside it. */
.london-page .cena-right{position:sticky; top:100px;}
@media (max-width:860px){.london-page .cena-right{position:static;}}
.london-page .cena-left p{margin:0 0 12px; color:var(--ink-soft);}
.london-page .cena-about{margin-top:24px;}
.london-page .cena-about p{margin:0 0 14px; line-height:1.6;}
.london-page .cena-about p:last-child{margin-bottom:0;}
.london-page .cena-left strong{color:var(--ink); font-family:'JetBrains Mono',monospace;}
.london-page .cena-right .form-shell{position:sticky; top:200px;}
@media (max-width:860px){.london-page .cena-right .form-shell{position:static;}}
.london-page .price-card{background:var(--card-bg); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); margin-top:20px;}
.london-page .price-card .big{font-family:var(--font-display, 'Fraunces', serif); font-size:2.53rem; font-weight:600; color:var(--teal);}
.london-page .price-card .was{font-size:0.977rem; color:var(--ink-soft); text-decoration:line-through; margin-left:8px;}
.london-page .price-card .note{font-size:0.943rem; color:#B4540E; margin-top:6px; font-weight:600;}
/* .pay-modal/.pay-tabs/.pay-fields etc (the reusable payment-button popup,
   academia_payment_button() in shared-components.php) now live unscoped in
   academia-shared.css - Sertifikati uses the same component and doesn't
   load this file. Only this page's own price-card spacing stays here. */
.london-page .price-card .pay-info-btn{width:100%; justify-content:center; margin-top:18px;}

.london-page .form-shell{background:var(--card-bg); border:1px solid var(--line); border-radius:18px; padding:22px 26px; box-shadow:var(--shadow); max-width:720px; margin-inline:auto;}

/* Real WPForms markup override (shortcode output doesn't use our .form-grid/.field classes) */
.london-page .wpforms-container{margin:0;}
.london-page .wpforms-field-container{display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; align-items:start;}
@media (max-width:700px){.london-page .wpforms-field-container{grid-template-columns:1fr;}}
.london-page .wpforms-field{margin:0 !important; padding:0 !important;}
.london-page .wpforms-field[data-field-id="0"],
.london-page .wpforms-field[data-field-id="21"],
.london-page .wpforms-field[data-field-id="22"]{grid-column:1/-1;}
.london-page .wpforms-field-label{font-size:0.851rem; font-weight:600; color:var(--ink-soft); margin-bottom:3px !important; display:block;}
.london-page .wpforms-field input[type=text],
.london-page .wpforms-field input[type=email],
.london-page .wpforms-field input[type=tel],
.london-page .wpforms-field input[type=date],
.london-page .wpforms-field input[type=number],
.london-page .wpforms-field select,
.london-page .wpforms-field textarea{
  width:100% !important; max-width:100% !important; font:inherit !important; font-size:1.058rem !important; line-height:1.3 !important;
  padding:11px 14px !important; border-radius:9px !important;
  border:1px solid var(--line) !important; background:var(--ground-raised) !important; color:var(--ink) !important;
  box-sizing:border-box !important; height:44px !important; transition:border-color .15s ease, box-shadow .15s ease;
}
.london-page .wpforms-field input::placeholder,
.london-page .wpforms-field textarea::placeholder{color:var(--ink-soft); opacity:.75;}
.london-page .wpforms-field textarea{height:auto !important; min-height:96px !important; resize:vertical; padding-top:11px !important;}
.london-page .wpforms-field select{
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2357707E' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px !important;
  padding-right:38px !important;
}
.london-page .wpforms-field input:hover,
.london-page .wpforms-field select:hover,
.london-page .wpforms-field textarea:hover{border-color:#B9CBD6 !important;}
.london-page .wpforms-field input:focus,
.london-page .wpforms-field select:focus,
.london-page .wpforms-field textarea:focus{
  outline:none !important; border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(0,137,208,.15) !important;
}
/* real sub-labels ("First"/"Last") replaced by placeholders inside the field via JS - hide the floating gray caption underneath */
.london-page .wpforms-field-sublabel{display:none !important;}
.london-page .wpforms-field-row{display:flex; gap:14px; margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important;}
/* WPForms gives this row a float-layout clearfix (::before/::after {display:table}) -
   once the row is display:flex those become phantom flex items, eating one gap's
   worth of space on each side (fields no longer reach the row's true edges) */
.london-page .wpforms-field-row::before,
.london-page .wpforms-field-row::after{display:none !important; content:none !important;}
.london-page .wpforms-field-row-block{flex:1; margin:0 !important; padding:0 !important;}
.london-page .wpforms-submit-container{grid-column:1/-1; margin:6px 0 0 !important;}
.london-page .wpforms-submit{
  width:100%; background:var(--orange); color:#fff; border:none; border-radius:999px;
  padding:13px 24px; font-weight:600; font-size:1.15rem; cursor:pointer;
  transition:background-color .3s ease, transform .2s ease, box-shadow .2s ease;
}
.london-page .wpforms-submit:hover{background:var(--orange-deep); transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(19,42,58,.4);}

/* Photo gallery + lightbox now live in academia-shared.css (bare
   selectors, no .london-page prefix) so any custom page can use them. */

/* "Primer nedelje" - left text + 3 cards sharing one panorama photo
   (background-size/position computed exactly in JS - see london.js
   layoutWeekCards()), middle card taller so it reveals more of the image
   (the Big Ben spire), side cards crop off just its very tip. */
/* Same inset-background rule as .blog-section/.team-carousel
   (academia-shared.css / home.css): navy card sits 40px from the real
   viewport edge on desktop instead of bleeding full-width, while the
   actual content stays pinned to its normal ~1120px column via
   .week-split-inner so the week-card sizes (and layoutWeekCards()'s crop
   math, which reads those sizes) don't change - only the backdrop grows. */
.london-page .week-split{padding-block:64px;}
.london-page .week-split .wrap{background:var(--ink); color:#fff; border-radius:28px; padding:56px 40px;}
.london-page .week-split-inner{max-width:1250px; margin-inline:auto;}
@media (min-width:701px){
  .london-page .week-split .wrap{
    max-width:none;
    width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .week-split .wrap{padding:40px 22px; border-radius:20px;}
}
.london-page .week-split-grid{display:grid; grid-template-columns:.75fr 2fr; gap:40px; align-items:end;}
@media (max-width:860px){.london-page .week-split-grid{grid-template-columns:1fr; align-items:start;}}
.london-page .week-split-text .eyebrow{color:var(--sky);}
.london-page .week-split-text h2{color:#fff; font-size:clamp(1.84rem,3.4vw,2.42rem); margin-top:10px;}
.london-page .week-split-text p{color:#9FB7C4; margin-top:14px; font-size:1.081rem; line-height:1.5;}
.london-page .week-cards{display:flex; align-items:flex-end; gap:14px;}
.london-page .week-card{position:relative; flex:1; min-width:0; height:320px; border-radius:14px; overflow:hidden;}
.london-page .week-card.week-card-tall{height:360px;}
.london-page .week-card-bg{position:absolute; inset:0; background-image:url('../images/london-week-strip.jpg'); background-repeat:no-repeat;}
.london-page .week-card-overlay{display:none;}
/* no full-photo gradient - a solid caption bar pinned to the bottom keeps
   the photo clean while the text underneath stays legible on any photo. */
.london-page .week-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:16px 20px 18px; background:rgba(5,20,30,.82); backdrop-filter:blur(2px);
  display:flex; flex-direction:column; gap:6px;
}
.london-page .week-card-body h3{color:#fff; font-size:1.26rem; font-weight:600;}
.london-page .week-card-body p{color:#DCEAE5; font-size:0.977rem; line-height:1.4; margin:0;}
.london-page .week-card-cta{color:#fff; font-weight:600; font-size:0.977rem; margin-top:2px;}
.london-page .week-card-cta:hover{text-decoration:underline;}
@media (max-width:700px){
  .london-page .week-cards{flex-direction:column; align-items:stretch;}
  /* .week-card{flex:1} sets flex-basis:0%, which overrides plain `height`
     as the main-size in a column flex container - without resetting flex
     to none here too, the cards collapse to 0px tall on mobile (no
     explicit container height to flex-grow into). */
  .london-page .week-card, .london-page .week-card.week-card-tall{height:220px; flex:none;}
  .london-page .week-card-bg{background-size:cover !important; background-position:center !important;}
}

/* "Dan po dan" - interactive explorer (click a day tab, feature panel
   swaps via a simple class toggle, all 13 panels are real markup rendered
   up front - no innerHTML swapping, no height measurement, so none of the
   getComputedStyle/animation flakiness hit elsewhere on this page applies
   here). Both weeks show side by side (2 tab columns) instead of behind a
   Nedelja 1/2 switch - one less click, and the whole trip is scannable at
   a glance. */
.london-page .day-explorer .section-head p:not(.eyebrow){font-size:1.29rem;}
.london-page .day-explorer-grid{display:grid; grid-template-columns:1fr minmax(0,1.15fr) 1fr; gap:20px; align-items:stretch;}
.london-page .day-tabs-col{display:flex; flex-direction:column; min-width:0;}
.london-page .day-tabs-week-1{order:1;}
.london-page .day-feature{order:2;}
.london-page .day-tabs-week-2{order:3;}
.london-page .day-tabs-week-label{
  font-family:'JetBrains Mono',monospace; font-size:0.82rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px;
}
.london-page .day-tabs{display:flex; flex-direction:column; gap:8px; flex:1;}
.london-page .day-tab{
  flex:1;
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--card-bg); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.london-page .day-tab:hover{border-color:var(--sky);}
.london-page .day-tab.is-active{border-color:var(--teal); background:var(--ground-raised); box-shadow:0 0 0 3px rgba(0,137,208,.14), var(--shadow);}
.london-page .day-tab-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.london-page .day-tab-text span{font-size:1.058rem; color:var(--ink-soft); font-weight:500;}
.london-page .day-tab-text strong{font-size:1.24rem; color:var(--ink); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.london-page .day-feature{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:var(--card-bg);}
.london-page .day-panel{display:none; flex-direction:column; height:100%;}
.london-page .day-panel.is-active{display:flex;}
.london-page .day-panel-photo{aspect-ratio:3/2; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:var(--ink);}
.london-page .day-panel-body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1;}
.london-page .day-panel-badge{
  display:inline-flex; align-items:center; gap:8px; width:max-content;
  background:var(--ground); border-radius:999px; padding:6px 14px 6px 8px;
  font-family:'JetBrains Mono',monospace; font-size:0.897rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep);
}
.london-page .day-panel-badge svg{width:16px; height:16px;}
.london-page .day-panel-body h3{font-size:1.72rem; margin-top:2px;}
.london-page .day-panel-body p{color:var(--ink-soft); font-size:1.24rem; line-height:1.55; margin:0;}
@media (max-width:860px){
  .london-page .day-explorer-grid{grid-template-columns:1fr;}
  /* the 1|content|2 reorder is a desktop-column thing - single-column
     mobile keeps both day lists together (source order) with the feature
     panel last, so you pick a day before seeing its content, not in the
     middle of scanning the week. */
  .london-page .day-tabs-week-1{order:initial;}
  .london-page .day-feature{order:initial;}
  .london-page .day-tabs-week-2{order:initial;}
  .london-page .day-tabs{flex-direction:row; overflow-x:auto; gap:10px; padding-bottom:8px; -webkit-overflow-scrolling:touch;}
  .london-page .day-tab{flex:0 0 auto; flex-direction:column; align-items:center; text-align:center; width:96px; gap:6px; padding:12px 8px;}
  .london-page .day-tab-text{align-items:center;}
  .london-page .day-tab-text strong{display:none;}
  .london-page .day-panel-photo{aspect-ratio:3/2;}
}

/* "Tvoj put, korak po korak" - 6-step journey, click a card to expand its
   detail panel (exclusive accordion, JS in london.js). CSS Grid with a flat
   child order (all 6 numbers, then all 6 cards, then all 6 detail panels)
   auto-wraps into 3 rows of 6 columns - the detail panel for step N then
   sits naturally right below card N, no JS position math needed. */
/* No dark gradient wash on this photo anymore (removed on purpose - it
   reads brighter without it), so the white heading text needs its own
   contrast instead of relying on an overlay - a solid text-shadow keeps
   every letter readable against whatever's behind it (sky, buildings,
   clouds) without dimming the photo itself. */
.london-page .journey-head .eyebrow, .london-page .journey-head h2, .london-page .journey-head p:last-child{
  text-shadow: 0 2px 14px rgba(5,10,16,.7), 0 1px 3px rgba(5,10,16,.9);
}
.london-page .journey-head .eyebrow{position:relative; padding-bottom:14px; display:inline-block; color:var(--sky);}
.london-page .journey-head .eyebrow::after{content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; background:var(--teal); border-radius:2px;}
.london-page .journey-head h2{color:#fff;}
.london-page .journey-head p:last-child{color:rgba(255,255,255,.92);}
.london-page .journey-doodle{position:absolute; top:-6px; right:0;}
@media (max-width:760px){.london-page .journey-doodle{display:none;}}

/* wider than the standard .wrap (1120px) - cards get more room, and this
   is now a sibling of .wrap, not nested in it, specifically so the
   .journey-detail popovers below (position:absolute) can float freely
   without the .wrap's own width constraining them either.
   Reserve extra bottom space permanently (not just when open) - the popover
   is out of flow so it can't grow this the way normal content would, and
   without this buffer it would spill visually onto the section below. */
.london-page .journey-wrap{
  max-width:1400px; margin-inline:auto; padding-inline:20px; margin-bottom:230px;
}
@media (max-width:760px){.london-page .journey-wrap{margin-bottom:0;}}
/* .journey-step is a pure grouping wrapper (num + card-wrap per step) so the
   markup reads step-by-step and mobile can stack it naturally - "display:
   contents" makes it invisible to layout, its children join the grid
   directly as if the wrapper weren't there. grid-auto-flow:column fills
   top-to-bottom within a step before moving to the next column, so each
   step's own num+card-wrap pair lines up in the same column automatically -
   no manual grid-column math needed per step. */
.london-page .journey-step{display:contents;}
.london-page .journey{
  position:relative; display:grid;
  grid-auto-flow:column; grid-template-rows:auto auto; grid-auto-columns:1fr;
  gap:10px 18px;
}
.london-page .journey::before{content:""; position:absolute; top:19px; left:5%; right:5%; height:2px; background:rgba(255,255,255,.25);}
.london-page .journey-num{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  font-family:var(--font-display, 'Fraunces', serif); font-weight:600; color:#fff; font-size:1.21rem;
  box-shadow:0 0 0 3px #fff; transition:box-shadow .2s ease;
}
.london-page .journey-num.is-active{box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(0,174,240,.35);}
/* <details>/<summary> - same proven-reliable disclosure mechanism as the
   FAQ accordion on this page (a max-height/JS-height version of this was
   tried first but wouldn't render on this specific mobile layout - the
   browser's own native open/close is bulletproof by comparison).
   card + its popover share one positioning context, so the popover (below)
   is purely visual/floating and never affects this wrap's own height -
   opening one never grows or shrinks the section. */
.london-page .journey-card-wrap{position:relative;}
.london-page .journey-card-wrap[open]{z-index:20;}
.london-page .journey-card{
  width:100%; background:var(--card-bg); border:2px solid transparent; border-radius:14px; padding:20px 16px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  cursor:pointer; list-style:none; box-shadow:var(--shadow);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.london-page .journey-card::-webkit-details-marker{display:none;}
.london-page .journey-card:hover{transform:translateY(-2px);}
.london-page .journey-card-wrap[open] .journey-card{border-color:var(--sky); box-shadow:0 0 0 5px rgba(0,174,240,.18), var(--shadow);}
.london-page .journey-icon{width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--teal); margin-bottom:2px;}
.london-page .journey-title{font-weight:700; color:var(--ink); font-size:1.104rem;}
.london-page .journey-sub{color:var(--ink-soft); font-size:0.897rem; line-height:1.35;}

/* floating popover, NOT in normal flow - never changes .journey's own
   height, so opening/closing a step never grows or shrinks the section. */
.london-page .journey-detail{position:absolute; top:100%; left:0; right:0; margin-top:10px; z-index:10;}
.london-page .journey-detail-inner{
  background:var(--card-bg); border-radius:14px; padding:14px; border:1px solid var(--sky);
  display:flex; gap:10px; align-items:flex-start;
  box-shadow:0 14px 30px -10px rgba(0,174,240,.4), 0 0 0 4px rgba(0,174,240,.12);
}
.london-page .journey-detail-icon{
  flex:none; width:32px; height:32px; border-radius:50%; background:rgba(0,174,240,.14);
  color:var(--teal-deep); display:flex; align-items:center; justify-content:center;
}
.london-page .journey-detail-inner strong{display:block; color:var(--ink); font-size:0.989rem; margin-bottom:3px;}
.london-page .journey-detail-inner p{margin:0; color:var(--ink-soft); font-size:0.92rem; line-height:1.4;}
@media (max-width:760px){
  /* horizontal-scroll + a floating (position:absolute) popover don't mix:
     overflow-x:auto forces overflow-y:auto too (a CSS rule, can't be mixed),
     which silently clips the popover - looked like tapping a card did
     nothing. Switch to a plain vertical stack instead: one column, and the
     detail panel goes back in normal flow (position:static) so tapping a
     step pushes the rest down, same as any ordinary mobile accordion. */
  .london-page .journey{
    grid-auto-flow:row; grid-template-columns:1fr; grid-template-rows:none;
  }
  .london-page .journey::before{display:none;}
  .london-page .journey-num{margin-bottom:10px;}
  .london-page .journey-card-wrap{margin-bottom:16px;}
  .london-page .journey-detail{
    position:static; margin-top:10px;
  }
}

.london-page .incl-section{background:#FBEADA;}

/* "Ne odgovara ti baš London" - same orange as .incl-section, full-bleed,
   no side inset needed. Gap below (before .blog-section's dark card)
   mirrors the .photo-band margin-top trick - same 40px as the edge inset. */
.london-page .crosssell-section{background:#FBEADA;}
@media (min-width:701px){.london-page .crosssell-section{margin-bottom:40px;}}
.london-page .incl-head{position:relative; max-width:600px;}
.london-page .detail-badge{
  display:inline-block; background:var(--ground-raised); border:1px solid var(--line);
  border-radius:999px; padding:5px 14px; font-size:0.828rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.london-page .incl-head h2{margin-top:14px;}
.london-page .hl-underline{position:relative; display:inline-block;}
.london-page .hl-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px;
  background:var(--green-deep); border-radius:2px;
}

.london-page .incl{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px;}
@media (max-width:760px){.london-page .incl{grid-template-columns:1fr;}}
.london-page .incl-card{
  border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 28px; background:var(--card-bg); box-shadow:var(--shadow);
}
.london-page .incl-card-head{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.london-page .incl-icon-badge{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.london-page .incl-card.yes .incl-icon-badge{background:var(--green-deep);}
.london-page .incl-card.no .incl-icon-badge{background:var(--stamp);}
.london-page .incl-card h3{font-size:1.26rem; font-weight:700; color:var(--ink);}
.london-page .incl-card ul{margin:0; padding:0; list-style:none; display:grid; gap:11px; font-size:1.058rem; color:var(--ink-soft);}
.london-page .incl-card li{padding-left:2px;}
.london-page .incl-card.yes li::before{content:"✓ "; color:var(--green-deep); font-weight:700;}
.london-page .incl-card.no li::before{content:"– "; color:var(--stamp); font-weight:700;}
.london-page .incl-note{margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--line); font-size:0.98rem; line-height:1.5; color:var(--ink-soft);}
.london-page .incl-note strong{color:var(--ink);}

.london-page .proof{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start;}
@media (max-width:860px){.london-page .proof{grid-template-columns:1fr;}}
.london-page .badges{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.london-page .badge{border:1px solid var(--line); background:var(--ground-raised); border-radius:10px; padding:10px 14px; font-size:0.943rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.london-page .badge b{color:var(--ink);}
.london-page .bio{margin-top:20px; font-size:1.081rem; color:var(--ink-soft);}
.london-page .bio strong{color:var(--ink);}
.london-page .uk-counsellor-badge{width:180px; height:auto; border-radius:14px; box-shadow:var(--shadow); margin:18px 0 4px;}
/* SCL London section-head: no second column any more (the badge moved to "Tvoja pratnja"), so the
   intro text runs the full width of the container instead of the usual 660px cap. Left-aligned. */
.london-page #scl-london .scl-head{max-width:none; text-align:left;}
.london-page #scl-london .scl-head p:not(.eyebrow){max-width:none;}
/* "Tvoja pratnja": British Council badge under the video, centered in the media column - big enough to
   read, never wider than its column (on phones it follows the video, same width cap). */
.london-page .companion-badge{display:block; width:min(100%, 320px); height:auto; margin:24px auto 0;}
@media (max-width:860px){.london-page .companion-badge{width:min(100%, 300px); margin-top:20px;}}
.london-page .campus-photo{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative;}
.london-page .campus-photo img{width:100%; height:280px; object-fit:cover; display:block;}
/* Kevin.mov is a vertical (portrait) recording - a landscape 280px-tall
   box would crop almost the whole frame, so this figure gets its own
   tall aspect ratio instead of the horizontal photo height above. */
.london-page .campus-photo video{width:100%; aspect-ratio:9/16; max-height:520px; object-fit:cover; display:block; background:#000;}
.london-page .campus-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:12px 16px; font-size:0.897rem; color:#fff; background:linear-gradient(0deg, rgba(7,15,23,.75), transparent);}
.london-page .postcard{background:var(--ground-raised); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px 22px 18px; margin-top:18px; font-family:var(--font-display, 'Fraunces', serif); font-size:1.15rem; line-height:1.5;}
.london-page .postcard::before{content:"NEEDS TESTIMONIAL"; display:block; width:max-content; margin-bottom:12px; font-family:'JetBrains Mono',monospace; font-size:0.644rem; letter-spacing:.1em; color:var(--stamp); border:1px solid var(--stamp); padding:3px 7px; border-radius:4px;}
.london-page .postcard footer{margin-top:12px; font-family:var(--font-body, 'Work Sans', sans-serif); font-size:0.943rem; color:var(--ink-soft);}

/* Same inset-background rule as .blog-section/.team-carousel/.week-split/
   .photo-band: card sits 40px from the real viewport edge on desktop
   instead of bleeding full-width, content stays pinned to its normal
   1120px column via .faq-inner. This one's a soft tint of --orange
   instead of the dark navy the other sections use - light background,
   so it keeps the normal dark ink text colors (no white-text override
   needed) and the white .faq details cards float on top of it the same
   way blog-cards float on navy. */
.london-page .faq-section{padding-block:64px;}
.london-page .faq-section .wrap{background:#FBEADA; border-radius:28px; padding:56px 40px;}
/* Studio "Pozadina sekcije" (tones): class lands on the outer <section>, card is this nested .wrap. */
.london-page .faq-section.studio-tone-sky .wrap{background:#E3F2FB;}
.london-page .faq-section.studio-tone-dark .wrap{background:#132A3A;}
.london-page .faq-inner{max-width:1250px; margin-inline:auto;}
@media (min-width:701px){
  .london-page .faq-section .wrap{
    max-width:none;
    width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .faq-section .wrap{padding:40px 22px; border-radius:20px;}
}
/* Studio "Širina pozadine" (edge): same full-bleed pattern as .lang-tests (academia-shared.css). */
.london-page .faq-section.studio-edge-full .wrap{border-radius:0;}
@media (min-width:701px){
  .london-page .faq-section.studio-edge-full .wrap{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
}
.london-page .faq details{margin-bottom:14px;}
.london-page .faq details{
  background:var(--card-bg); border:1px solid var(--line); border-radius:14px;
  padding:6px 22px; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.london-page .faq details:hover{border-color:var(--teal);}
.london-page .faq details[open]{box-shadow:var(--shadow); border-color:var(--teal);}
.london-page .faq summary{
  cursor:pointer; font-weight:700; font-size:1.44rem; list-style:none;
  display:flex; align-items:center; gap:16px; padding-block:20px;
}
.london-page .faq summary::-webkit-details-marker{display:none;}
.london-page .faq summary .qn{
  flex:none; font-family:'JetBrains Mono',monospace; font-size:0.977rem; font-weight:700;
  color:var(--teal); background:var(--ground); border-radius:8px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
}
.london-page .faq details[open] summary .qn{background:var(--teal); color:#fff;}
.london-page .faq summary .qtext{flex:1;}
.london-page .faq summary .ind{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.26rem; color:var(--teal);
  transition:transform .25s ease, background-color .2s ease, color .2s ease;
}
.london-page .faq details[open] summary .ind{background:var(--teal); color:#fff; border-color:var(--teal); transform:rotate(45deg);}
.london-page .faq .a{color:var(--ink-soft); margin:0 0 20px 50px; max-width:64ch; font-size:1.21rem; line-height:1.6;}

/* TESTIMONIALS - same orange-inset treatment as .faq-section (real
   polaznik photos + quotes, white cards floating on the tinted band). */
.london-page .testi-band{padding-block:56px;}
.london-page .testi-band .wrap{background:#FBEADA; border-radius:28px; padding:56px 40px;}
/* Studio "Pozadina sekcije" (tones): class lands on the outer <section>, card is this nested .wrap. */
.london-page .testi-band.studio-tone-sky .wrap{background:#E3F2FB;}
.london-page .testi-band.studio-tone-dark .wrap{background:#132A3A;}
.london-page .testi-inner{max-width:1250px; margin-inline:auto;}
@media (min-width:701px){
  .london-page .testi-band .wrap{
    max-width:none; width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .testi-band .wrap{padding:40px 22px; border-radius:20px;}
}
/* Studio "Širina pozadine" (edge): same full-bleed pattern as .lang-tests (academia-shared.css). */
.london-page .testi-band.studio-edge-full .wrap{border-radius:0;}
@media (min-width:701px){
  .london-page .testi-band.studio-edge-full .wrap{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
}
.london-page .testi-band .section-head{text-align:center; max-width:620px; margin:0 auto 40px;}
.london-page .testi-cards{display:grid; grid-template-columns:1fr; gap:24px;}
.london-page .testi-card{
  background:var(--card-bg); border-radius:18px; box-shadow:var(--shadow);
  padding:28px; margin:0; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:20px;
}
.london-page .testi-card img{width:240px; height:auto; border-radius:14px; flex:none; box-shadow:var(--shadow);}
/* Row layout only from tablet width up - 2nd card mirrors image/text
   sides so the two rows read differently, not identical stacked twins. */
@media (min-width:701px){
  .london-page .testi-card{flex-direction:row; align-items:center; text-align:left; gap:44px; padding:44px;}
  .london-page .testi-card:nth-child(2){flex-direction:row-reverse;}
  .london-page .testi-card img{width:340px;}
}
/* Instagram embeds row under the testimonials - one row, native horizontal
   scroll-snap (Instagram's embed has a ~326px minimum width, so 5 don't fit
   side by side at once). */
.london-page .ig-row-title{margin:44px 0 18px; text-align:center; font-family:var(--font-display, 'Fraunces', serif); font-size:1.5rem; font-weight:600; color:var(--ink);}
.london-page .ig-row{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:10px; -webkit-overflow-scrolling:touch;}
.london-page .ig-card{flex:0 0 326px; scroll-snap-align:start; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.london-page .ig-card iframe{display:block; width:100%; height:600px; border:0;}
.london-page .ig-row::-webkit-scrollbar{height:8px;}
.london-page .ig-row::-webkit-scrollbar-thumb{background:rgba(19,42,58,.25); border-radius:4px;}
.london-page .testi-card blockquote{margin:0; font-family:var(--font-display, 'Fraunces', serif); font-size:1.3rem; line-height:1.55; color:var(--ink);}
.london-page .testi-card cite{display:block; margin-top:14px; font-style:normal; font-weight:700; color:var(--ink-soft); font-size:1.05rem;}
@media (min-width:701px){.london-page .testi-card blockquote{font-size:1.5rem;}}

/* Header is now a shared component - see assets/academia-header.css
   (body.academia-fixed-header + body.academia-header-transparent-hero,
   applied via academia_custom_body_classes() in the main plugin file). */

/* ============================================================
   FOOTER — hide Astra's real global footer on this page only,
   replace with our own custom-coded footer (no map/address).
   ============================================================ */
body.page-id-31566 #colophon,
body.page-id-31595 #colophon,
body.page-id-31599 #colophon,
body.page-id-7604 #colophon,
body.page-id-25070 #colophon{ display:none !important; }

/* cross-sell strip */
/* .crosssell replaced by the shared academia_service_cards() component
   (see academia-shared.css .services-grid.cols-3). */

/* blog section - see academia-shared.css .blog-section (shared across
   every custom page, not page-specific). */

/* ============================================================
   BLOG - arhiva (template-blog.php) + pojedinačan članak (template-post.php)
   ============================================================ */
body.academia-blog #colophon{display:none !important;}
.blog-page .hero-photo{min-height:52vh; min-height:52svh;}
.blog-page .hero-photo .eyebrow, .blog-page .hero h1, .blog-page .hero p.lede, .blog-page .post-meta{text-shadow:0 2px 14px rgba(5,10,16,.8), 0 1px 3px rgba(5,10,16,.95);}
.blog-page .hero-photo .eyebrow{color:#fff; font-weight:700;}
.blog-page .post-crumb a{color:#fff; text-decoration:none;}
.blog-page .post-crumb a:hover{text-decoration:underline;}
.blog-page .post-title{font-size:clamp(1.9rem,4vw,3rem); line-height:1.15; text-transform:none;}
.blog-page .post-meta{display:flex; gap:10px; margin-top:16px; color:rgba(255,255,255,.92); font-weight:500;}

/* archive head (no photo hero) - top padding clears the fixed header */
.blog-page .bp-head{padding-block:150px 8px;}
.blog-page .bp-head h1{font-size:clamp(2.2rem,4.4vw,3.2rem); font-weight:600;}
.blog-page .bp-lede{margin:10px 0 0; max-width:60ch; color:var(--ink-soft); font-size:1.17rem;}
/* filters */
.blog-page .bp-filters{padding-block:36px 8px;}
.blog-page .bp-filter-row{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.blog-page .bp-chips{display:flex; flex-wrap:wrap; gap:10px; flex:1 1 520px;}
.blog-page .bp-chip{display:inline-flex; align-items:center; padding:8px 18px; border-radius:999px; border:1px solid var(--line); background:var(--card-bg); color:var(--ink); font-weight:600; font-size:0.98rem; text-decoration:none; transition:border-color .2s ease, background-color .2s ease, color .2s ease;}
.blog-page .bp-chip:hover{border-color:var(--teal); color:var(--teal-deep);}
.blog-page .bp-chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}
.blog-page .bp-search{display:flex; align-items:center; background:var(--card-bg); border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 18px; min-width:260px;}
.blog-page .bp-search input{border:none; background:transparent; outline:none; font:inherit; color:var(--ink); padding:8px 0; flex:1; min-width:0; box-shadow:none;}
.blog-page .bp-search button{border:none; background:var(--teal); color:#fff; width:38px; height:38px; min-width:38px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.blog-page .bp-search button:hover{background:var(--teal-deep);}
@media (max-width:700px){.blog-page .bp-search{width:100%;}}

/* grid + cards */
.blog-page .bp-listing{padding-block:36px 64px;}
.blog-page .bp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:980px){.blog-page .bp-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.blog-page .bp-grid{grid-template-columns:1fr;}}
.blog-page .bp-card{display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;}
.blog-page .bp-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -14px rgba(19,42,58,.35);}
.blog-page .bp-thumb{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ground);}
.blog-page .bp-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.blog-page .bp-card:hover .bp-thumb img{transform:scale(1.05);}
.blog-page .bp-thumb-fallback{display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--teal), var(--teal-deep));}
.blog-page .bp-card:nth-child(3n+2) .bp-thumb-fallback{background:linear-gradient(135deg, var(--orange), var(--orange-deep));}
.blog-page .bp-card:nth-child(3n) .bp-thumb-fallback{background:linear-gradient(135deg, var(--green), var(--green-deep));}
.blog-page .bp-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.blog-page .bp-cat{align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:0.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--teal-deep); background:rgba(0,137,208,.1); padding:4px 10px; border-radius:6px;}
.blog-page .bp-card h3{font-size:1.25rem; line-height:1.25;}
.blog-page .bp-card h3 a{text-decoration:none; color:var(--ink);}
.blog-page .bp-card h3 a:hover{color:var(--teal-deep);}
.blog-page .bp-body p{margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.5;}
.blog-page .bp-meta{margin-top:auto; padding-top:10px; display:flex; gap:8px; font-size:0.88rem; color:var(--ink-soft);}
.blog-page .bp-empty{text-align:center; color:var(--ink-soft); padding:40px 0;}

/* pagination */
.blog-page .bp-pagination{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:44px;}
.blog-page .bp-pagination .page-numbers{min-width:44px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); background:var(--card-bg); color:var(--ink); font-weight:600; text-decoration:none;}
.blog-page .bp-pagination a.page-numbers:hover{border-color:var(--teal); color:var(--teal-deep);}
.blog-page .bp-pagination .page-numbers.current{background:var(--ink); border-color:var(--ink); color:#fff;}
.blog-page .bp-pagination .page-numbers.dots{border:none; background:transparent;}

/* single post */
.post-page .post-main{padding-block:56px 24px;}
.post-page .post-body{max-width:820px; margin-inline:auto; font-size:1.16rem; line-height:1.78; color:var(--ink);}
.post-page .post-body > *:first-child{margin-top:0;}
.post-page .post-body p{margin:0 0 1.15em;}
.post-page .post-body h1, .post-page .post-body h2, .post-page .post-body h3, .post-page .post-body h4{font-family:var(--font-display, 'Fraunces', serif); color:var(--ink); line-height:1.25; text-transform:none; margin:1.6em 0 .55em;}
.post-page .post-body h1{font-size:2rem;} .post-page .post-body h2{font-size:1.65rem;} .post-page .post-body h3{font-size:1.32rem;}
.post-page .post-body a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px;}
.post-page .post-body img{max-width:100%; height:auto; border-radius:14px; margin-block:1.2em;}
.post-page .post-body ul, .post-page .post-body ol{padding-left:1.4em; margin:0 0 1.15em;}
.post-page .post-body li{margin-bottom:.4em;}
.post-page .post-body blockquote{margin:1.6em 0; padding:18px 24px; border-left:4px solid var(--orange); background:#FBEADA; border-radius:0 14px 14px 0; font-family:var(--font-display, 'Fraunces', serif); font-size:1.2rem;}
.post-page .post-body table{width:100%; border-collapse:collapse; display:block; overflow-x:auto;}
.post-page .post-body th, .post-page .post-body td{border:1px solid var(--line); padding:10px 14px;}
.post-page .post-body iframe, .post-page .post-body video{max-width:100%; border-radius:14px;}
.post-page .post-body.is-elementor{max-width:1100px;}
.post-page .post-tags{max-width:820px; margin:36px auto 0; display:flex; flex-wrap:wrap; gap:10px;}
.post-page .post-cta{padding-block:40px 24px;}
.post-page .post-cta-card{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; background:#FBEADA; border-radius:24px; padding:38px 40px;}
.post-page .post-cta-card h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-top:6px;}
.post-page .post-cta-card p:not(.eyebrow){margin:8px 0 0; color:var(--ink-soft);}
.post-page .post-cta-actions{display:flex; gap:12px; flex-wrap:wrap;}
@media (max-width:700px){.post-page .post-cta-card{padding:28px 22px;} .post-page .post-body{font-size:1.08rem;}}
.post-page .post-related{padding-block:40px 64px;}

/* Kampovi hub hero - bigger type across the board */
.kampovi-page .hero-photo .eyebrow{font-size:1.05rem; letter-spacing:.16em;}
.kampovi-page .hero h1{font-size:clamp(2.9rem, 6.2vw, 4.8rem); line-height:1.06;}
.kampovi-page .hero p.lede{font-size:clamp(1.3rem, 2.1vw, 1.6rem); line-height:1.5; max-width:44rem;}
.kampovi-page .hero-photo .btn{font-size:1.25rem; padding:17px 34px;}

/* London 18+ hero - stronger legibility: flat light tint (inline), heavier
   shadow, solid white + medium-weight lede, bigger type, readable nav/ghost btn */
.london-odrasli-page .hero-photo .eyebrow{color:#fff; font-weight:700; font-size:1.02rem;}
.london-odrasli-page .hero h1{font-size:clamp(2.6rem, 5.4vw, 4.2rem); text-shadow: 0 2px 18px rgba(5,10,16,.9), 0 1px 4px rgba(5,10,16,.98);}
.london-odrasli-page .hero p.lede{color:#fff; font-weight:500; font-size:clamp(1.2rem, 1.9vw, 1.45rem); line-height:1.5; text-shadow: 0 2px 18px rgba(5,10,16,.9), 0 1px 4px rgba(5,10,16,.98);}
.london-odrasli-page .hero-photo .eyebrow{text-shadow: 0 2px 16px rgba(5,10,16,.9), 0 1px 4px rgba(5,10,16,.98);}
.london-odrasli-page .hero-photo .btn-ghost{background:rgba(5,10,16,.42); border-color:rgba(255,255,255,.85); color:#fff;}
body.page-template-template-london-odrasli.academia-header-transparent-hero #masthead:not(.is-scrolled) .main-header-menu .menu-link{
  text-shadow: 0 1px 10px rgba(5,10,16,.85), 0 1px 3px rgba(5,10,16,.95);
}

/* Instagram reels - standalone section above FAQ (London 14+) */
.london-page .ig-section{padding-block:56px;}
.london-page .ig-section .section-head{margin-bottom:28px;}

/* ============================================================
   Blog posts made in Studio (Academia Studio -> Blogovi): rows of image | text.
   Every row has the image on one side and the text on the other; the side alternates row by row.
   A row without an image (removed in Studio) is a single centered text column.
   ============================================================ */
.london-page .blog-rows{padding-block:48px 24px;}
.london-page .blog-rows-inner{display:flex; flex-direction:column; gap:56px; max-width:1120px; margin-inline:auto;}
.london-page .blog-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.london-page .blog-row.flip .blog-row-img{order:2;}
.london-page .blog-row-img{margin:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:var(--tint, #EAF1F6);}
.london-page .blog-row-img img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
.london-page .blog-row-text h2{font-size:clamp(1.45rem,2.6vw,1.9rem); line-height:1.25; margin:0 0 .6em; font-family:var(--font-display, 'Fraunces', serif); color:var(--ink); text-transform:none;}
.london-page .blog-row-text .post-body{max-width:none; margin:0; font-size:1.12rem; line-height:1.75;}
.london-page .blog-row.no-img{grid-template-columns:1fr; max-width:820px; margin-inline:auto; width:100%;}
@media (max-width:860px){
  .london-page .blog-row{grid-template-columns:1fr; gap:22px;}
  .london-page .blog-row.flip .blog-row-img{order:0;}
  .london-page .blog-rows-inner{gap:40px;}
}

/* Blogs made in Studio: the hero fills the whole viewport (old posts keep the 52vh hero above). */
.london-page.post-page-studio .hero-photo{min-height:100vh; min-height:100svh;}

/* Blogs made in Studio: optional h2 subtitle and intro paragraph under the hero title. */
.blog-page .post-subtitle{margin:14px 0 0; font-family:var(--font-display, 'Fraunces', serif); font-size:clamp(1.2rem,2.2vw,1.65rem); font-weight:500; line-height:1.3; color:#fff; text-transform:none; text-shadow:0 2px 14px rgba(5,10,16,.8), 0 1px 3px rgba(5,10,16,.95);}
.blog-page .post-lede{margin:14px 0 0; max-width:60ch; font-size:1.14rem; line-height:1.6; color:rgba(255,255,255,.94); text-shadow:0 2px 14px rgba(5,10,16,.8), 0 1px 3px rgba(5,10,16,.95);}