/* Home v2 (/home-v2/ on staging, body.kluk-v2--home). Reveals use CSS scroll-driven animation
   (.kl-rv in global.css) instead of GSAP. */

/* ---------- header (Theme Builder header assigned to home-v2 only) ---------- */
body.kluk-v2 .kl-nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background-color .4s, backdrop-filter .4s; }
body.kluk-v2.admin-bar .kl-nav { top: 32px; }
body.kluk-v2 .kl-nav.is-solid { background: rgba(10,10,10,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--kl-line); }
body.kluk-v2 .kl-nav .kl-w { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
body.kluk-v2 .kl-nav .kl-logo img { height: 30px; width: auto; }
body.kluk-v2 .kl-nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
body.kluk-v2 .kl-nav ul a { font-size: 15px; font-weight: 500; text-decoration: none; opacity: .9; }
body.kluk-v2 .kl-nav ul a:hover { opacity: 1; }
body.kluk-v2 .kl-nav .kl-r { display: flex; align-items: center; gap: 22px; }
body.kluk-v2 .kl-nav .kl-tel { font-size: 13px; color: #d9d4cc; text-decoration: none; font-weight: 500; }
body.kluk-v2 .kl-menu { display: none; background: none; border: 0; color: var(--kl-fg); font: 600 16px var(--kl-body); cursor: pointer; min-height: 44px; padding: 0 4px; }
body.kluk-v2 .kl-drawer { position: fixed; inset: 0; z-index: 60; background: var(--kl-bg); padding: calc(24px + env(safe-area-inset-top, 0px)) var(--kl-gut) 24px; display: flex; flex-direction: column; overflow-y: auto; }
body.kluk-v2 .kl-drawer[hidden] { display: none; }
body.kluk-v2 .kl-drawer .kl-top-row { display: flex; justify-content: space-between; align-items: center; height: 52px; }
body.kluk-v2 .kl-drawer .kl-top-row img { height: 28px; width: auto; }
body.kluk-v2 .kl-drawer .kl-menu { display: block; }
body.kluk-v2 .kl-drawer ul { list-style: none; margin: 32px 0 0; padding: 0; }
body.kluk-v2 .kl-drawer li a { display: block; padding: 12px 0; font: 400 40px/1 var(--kl-display); text-transform: uppercase; text-decoration: none; }
body.kluk-v2 .kl-drawer .kl-btn { margin-top: 28px; align-self: flex-start; }
body.kluk-v2 .kl-drawer .kl-tlink { margin-top: 22px; align-self: flex-start; }
html.kl-drawer-open { overflow: hidden; }
/* Hide the default Divi header on home v2 when the custom header is in use. */
body.kluk-v2--home #main-header, body.kluk-v2--home #top-header { display: none; }
body.kluk-v2--home #page-container { padding-top: 0 !important; }

/* ---------- hero ---------- */
body.kluk-v2 .kl-home-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
body.kluk-v2 .kl-home-hero .kl-hero-media img { object-position: 60% 40%; filter: grayscale(.35) contrast(1.05) brightness(.62); }
body.kluk-v2 .kl-home-hero::after { background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.15) 75%), linear-gradient(0deg, var(--kl-bg) 0%, rgba(10,10,10,.7) 38%, transparent 62%); }
body.kluk-v2 .kl-home-hero > .et_pb_row:not(.kl-hero-media-row) { width: 100%; padding-bottom: 28px; }
body.kluk-v2 .kl-home-hero h1 { font-size: clamp(54px, 7.2vw, 116px); }
body.kluk-v2 .kl-home-hero .kl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 26px; }
body.kluk-v2 .kl-home-hero .kl-meta p,
body.kluk-v2 .kl-home-hero .kl-meta .kl-p { color: var(--kl-body-on-photo); max-width: 44ch; flex-basis: 100%; }
body.kluk-v2 .kl-home-hero .kl-where { margin-top: 32px; font-size: 15px; color: var(--kl-body-on-photo); }
body.kluk-v2 .kl-home-hero .kl-where a { color: var(--kl-fg); }

/* ---------- programme tiles ---------- */
body.kluk-v2--home .kl-tiles { grid-template-columns: 1fr 1fr; }
body.kluk-v2--home .kl-tile { aspect-ratio: 3 / 4.4; }
body.kluk-v2--home .kl-tile img { filter: grayscale(.5) brightness(.75); }
body.kluk-v2--home .kl-tile::after { background: linear-gradient(0deg, rgba(0,0,0,.94) 8%, rgba(0,0,0,.6) 45%, transparent 75%); }
body.kluk-v2--home .kl-tile .kl-t { left: 16px; right: 16px; bottom: 16px; }
body.kluk-v2--home .kl-tile h3 { font-size: 26px; }
body.kluk-v2--home .kl-tile p,
body.kluk-v2--home .kl-tile .kl-p { display: none; margin-top: 10px; }

/* ---------- timetable ---------- */
body.kluk-v2 .kl-tt { margin-top: 72px; padding: 72px 0; background: var(--kl-bg2); }
body.kluk-v2 .kl-rows { display: grid; gap: 28px; }
body.kluk-v2 .kl-row h3 { font-size: 28px; margin-bottom: 12px; }
body.kluk-v2 .kl-row .kl-a { font: 400 15px/1.3 var(--kl-body); color: var(--kl-soft); text-transform: none; letter-spacing: 0; margin-left: 8px; }
body.kluk-v2 .kl-note { color: var(--kl-soft); font-size: 15px; margin-top: 24px; }
body.kluk-v2 .kl-tt .kl-btn { margin-top: 24px; }

/* ---------- instructors ---------- */
body.kluk-v2--home .kl-roll { gap: 22px 40px; grid-template-columns: 1fr; }
body.kluk-v2--home .kl-quote { margin-top: 44px; }

/* ---------- first visit + location ---------- */
body.kluk-v2 .kl-visit { display: grid; gap: 40px; padding-bottom: 72px; }
body.kluk-v2 .kl-visit .kl-how { color: var(--kl-soft); max-width: 52ch; font-size: 18px; margin-top: 14px; }
body.kluk-v2 .kl-loc { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; }
body.kluk-v2 .kl-loc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.6); }
body.kluk-v2 .kl-loc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.92) 10%, transparent 70%); }
body.kluk-v2 .kl-loc .kl-c { position: relative; z-index: 2; padding: 28px; }
body.kluk-v2 .kl-loc h3 { font-size: 34px; }
body.kluk-v2 .kl-loc address { font-style: normal; color: var(--kl-body-on-photo); margin: 12px 0 20px; }
body.kluk-v2 .kl-loc .kl-links { display: flex; flex-wrap: wrap; gap: 22px; }

/* ---------- footer (Theme Builder footer for home-v2, or a final Divi section) ---------- */
body.kluk-v2 .kl-home-foot { background: var(--kl-bg2); padding: 56px 0 40px; }
body.kluk-v2 .kl-home-foot .kl-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
body.kluk-v2 .kl-home-foot img { height: 28px; width: auto; }
body.kluk-v2 .kl-home-foot p,
body.kluk-v2 .kl-home-foot .kl-p,
body.kluk-v2 .kl-home-foot a { font-size: 14px; color: var(--kl-soft); text-decoration: none; display: block; margin-top: 8px; }
body.kluk-v2 .kl-home-foot .kl-fh { display: block; font-size: 15px; font-weight: 600; color: var(--kl-fg); }
body.kluk-v2 .kl-home-foot .kl-legal { grid-column: 1 / -1; padding-top: 12px; font-size: 13px; color: var(--kl-mute); }
body.kluk-v2 .kl-home-foot .kl-legal a { display: inline; color: inherit; font-size: inherit; }

@media (max-width: 1060px) {
	body.kluk-v2 .kl-nav ul, body.kluk-v2 .kl-nav .kl-tel { display: none; }
	body.kluk-v2 .kl-nav .kl-menu { display: block; }
}
@media (max-width: 899px) {
	body.kluk-v2 .kl-home-hero { min-height: 0; padding-top: 300px; }
	body.kluk-v2 .kl-home-hero .kl-hero-media img { object-position: 62% 30%; }
	body.kluk-v2 .kl-home-hero::after { background: linear-gradient(0deg, var(--kl-bg) 8%, rgba(10,10,10,.7) 45%, rgba(10,10,10,.1) 80%), linear-gradient(180deg, rgba(10,10,10,.55), transparent 25%); }
	body.kluk-v2 .kl-home-hero h1 { font-size: clamp(44px, 13vw, 60px); }
	body.kluk-v2 .kl-home-hero .kl-meta { margin-top: 20px; gap: 18px 24px; }
	body.kluk-v2 .kl-home-hero .kl-where { margin-top: 24px; }
	body.kluk-v2 .kl-nav .kl-r .kl-btn { display: none; }
}
@media (max-width: 782px) { body.kluk-v2.admin-bar .kl-nav { top: 46px; } }
@media (min-width: 900px) {
	body.kluk-v2 .kl-home-hero .kl-meta p,
	body.kluk-v2 .kl-home-hero .kl-meta .kl-p { flex-basis: auto; margin-right: 16px; }
	body.kluk-v2--home .kl-tiles { grid-template-columns: repeat(4, 1fr); }
	body.kluk-v2--home .kl-tile { aspect-ratio: 3 / 4; }
	body.kluk-v2--home .kl-tile .kl-t { left: 22px; right: 22px; bottom: 22px; }
	body.kluk-v2--home .kl-tile h3 { font-size: clamp(30px, 2.6vw, 40px); }
	body.kluk-v2--home .kl-tile p,
	body.kluk-v2--home .kl-tile .kl-p { display: block; }
	body.kluk-v2 .kl-rows { grid-template-columns: 1fr 1fr; gap: 32px 56px; }
	body.kluk-v2--home .kl-roll { grid-template-columns: repeat(3, 1fr); }
	body.kluk-v2 .kl-visit { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-bottom: 96px; }
	body.kluk-v2 .kl-home-foot .kl-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	body.kluk-v2 .kl-tt { margin-top: 96px; padding: 88px 0; }
}