/* =========================================================
   Hobbies & Creative Arts — light editorial layout (hb-*)
   Brand: ink #363587 · marigold #f5c307
   ========================================================= */

body.hobbies-page{
  background:#fff;
}

.hb-hero,
.hb-programme,
.hb-beyond{
  position:relative;
  overflow:hidden;
  scroll-margin-top:96px;
}

.hb-copy h1,
.hb-copy h2,
.hb-beyond .hb-copy h2{
  margin:0 0 12px;
  color:rgb(52, 50, 114);
  font-family:Helvetica, Arial, sans-serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.015em;
}
.hb-copy h1{
  font-size:clamp(2.2rem, 4.8vw, 3.55rem);
}
.hb-copy h2,
.hb-beyond .hb-copy h2{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
}
.hb-lead{
  margin:0 0 18px !important;
  color:rgb(52, 50, 114) !important;
  font-family:Helvetica, Arial, sans-serif !important;
  font-size:clamp(1.2rem, 2.1vw, 1.55rem) !important;
  font-weight:700 !important;
  font-style:italic !important;
  line-height:1.25 !important;
}
.hb-copy p,
.hb-beyond .hb-copy p{
  margin:0 0 14px;
  color:rgb(33, 37, 41);
  font-family:"Roboto", Helvetica, Arial, sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.72;
  max-width:38rem;
}
.hb-copy p:last-child{ margin-bottom:0; }

.hb-split{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(24px, 4vw, 48px);
  align-items:center;
}
.hb-split-media-first .hb-media{ order:1; }
.hb-split-media-first .hb-copy{ order:2; }
.hb-copy,
.hb-media{
  min-width:0;
  align-self:center;
  width:100%;
}
.hb-copy{
  max-width:38rem;
}

.hb-hero{
  padding:36px 0 20px;
  background:#fff;
}

.hb-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin:clamp(8px, 2vw, 20px) 0 12px;
  padding:clamp(18px, 2.4vw, 26px) clamp(12px, 2vw, 22px);
  border-radius:18px;
  background:#edf4fb;
  border:1px solid rgba(54, 53, 135, .08);
  box-shadow:0 12px 28px -22px rgba(54, 53, 135, .35);
  position:relative;
  z-index:2;
}
.hb-stat{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:8px clamp(12px, 2vw, 22px);
  position:relative;
}
.hb-stat + .hb-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  bottom:18%;
  width:1px;
  background:rgba(54, 53, 135, .16);
}
.hb-stat-blob{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  color:rgb(52, 50, 114);
  font-size:1.45rem;
  line-height:1;
  border-radius:50%;
}
.hb-stat-blob i,
.hb-stat-blob svg{
  position:static !important;
  display:block !important;
  margin:0 !important;
  width:1.15em !important;
  height:1.15em !important;
  max-width:1.15em;
  max-height:1.15em;
  line-height:1 !important;
  vertical-align:middle;
}
.hb-stat-blob-hours{
  background:#cfe4f8;
}
.hb-stat-blob-arts{
  background:#f7c9d8;
  display:grid;
  grid-template-columns:1fr 1fr;
  place-items:center;
  gap:3px;
  padding:11px;
  width:68px;
  height:68px;
  font-size:.8rem;
  border-radius:42% 58% 48% 52% / 48% 42% 58% 52%;
}
.hb-stat-blob-arts i,
.hb-stat-blob-arts svg{
  width:1em !important;
  height:1em !important;
  max-width:1em;
  max-height:1em;
}
.hb-stat-blob-arts .fa-palette{ color:#c9a00a; }
.hb-stat-blob-trophy{
  background:#f8e39a;
  color:#8a6a00;
}
.hb-stat-copy{
  min-width:0;
}
.hb-stat-copy strong{
  display:block;
  margin:0 0 4px;
  color:rgb(52, 50, 114);
  font-family:Helvetica, Arial, sans-serif;
  font-size:clamp(1.85rem, 3.2vw, 2.45rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.hb-stat-copy span{
  display:block;
  max-width:14rem;
  margin:0;
  color:rgb(52, 50, 114);
  font-family:"Roboto", Helvetica, Arial, sans-serif;
  font-size:clamp(.78rem, 1.2vw, .9rem);
  font-weight:400;
  line-height:1.35;
}

.hb-icons{
  display:flex;
  flex-wrap:wrap;
  gap:18px 22px;
  margin:28px 0 0;
}
.hb-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:72px;
  color:rgb(52, 50, 114);
  text-decoration:none;
  font-family:Helvetica, Arial, sans-serif;
  font-size:.86rem;
  font-weight:700;
  transition:transform .25s ease;
}
.hb-icon:hover{ transform:translateY(-3px); color:rgb(52, 50, 114); }
.hb-icon-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  font-size:1.2rem;
  color:rgb(52, 50, 114);
  box-shadow:0 8px 18px -12px rgba(54, 53, 135, .35);
}
.hb-icon-music .hb-icon-circle{ background:#cfe4f8; }
.hb-icon-dance .hb-icon-circle{ background:#f7c9d8; }
.hb-icon-art .hb-icon-circle{ background:#f8e39a; }
.hb-icon-theatre .hb-icon-circle{ background:#c8ecd4; }

.hb-hero-photo,
.hb-frame{
  position:relative;
  margin:0;
  width:100%;
  overflow:hidden;
  background:#eceaf5;
  border-radius:18px;
}
.hb-hero-photo img{
  display:block;
  width:100%;
  height:clamp(180px, 28vw, 260px);
  object-fit:cover;
  object-position:center 25%;
}
.hb-frame img{
  display:block;
  width:100%;
  height:clamp(160px, 24vw, 220px);
  object-fit:cover;
  object-position:center 30%;
}

.hb-programme{
  padding:48px 0;
  background:#fff;
}
.hb-programme-alt{ background:#EFF6FB; }

.hb-video-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:18px;
  background:#1c1b4a;
  box-shadow:0 14px 28px -22px rgba(54, 53, 135, .55);
}
.hb-video-card img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
}
.hb-programme .hb-media .hb-video-card img,
.hb-beyond-video img{
  height:clamp(160px, 24vw, 220px);
  aspect-ratio:auto;
  object-fit:cover;
}
.hb-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.2rem;
  background:rgba(28, 27, 74, .28);
  transition:background .25s ease;
}
.hb-play i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--marigold);
  color:rgb(52, 50, 114);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.35);
}
.hb-video-card:hover .hb-play{ background:rgba(28, 27, 74, .38); }

.hb-video-stack{
  display:grid;
  gap:14px;
}
.hb-copy-center{
  text-align:center;
  max-width:40rem;
  margin:0 auto 28px;
}
.hb-copy-center p{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}
.hb-video-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2.5vw, 24px);
  max-width:920px;
  margin:0 auto;
}

.hb-deco{
  position:absolute;
  pointer-events:none;
  opacity:.55;
  z-index:0;
}
.hb-programme .wrap{ position:relative; z-index:1; }
.hb-deco-notes{
  right:6%;
  top:18%;
  width:120px;
  height:120px;
  background:
    radial-gradient(circle at 30% 35%, rgba(120,170,230,.35) 0 8px, transparent 9px),
    radial-gradient(circle at 58% 55%, rgba(120,170,230,.28) 0 6px, transparent 7px),
    radial-gradient(circle at 72% 28%, rgba(120,170,230,.22) 0 5px, transparent 6px);
}
.hb-deco-swirl{
  left:8%;
  bottom:12%;
  width:180px;
  height:180px;
  border-radius:60% 40% 55% 45%;
  background:rgba(247, 201, 216, .35);
  filter:blur(2px);
}
.hb-deco-palette{
  right:10%;
  top:22%;
  width:140px;
  height:140px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 40%, rgba(248, 227, 154, .7) 0 28%, transparent 29%),
    radial-gradient(circle at 65% 35%, rgba(200, 236, 212, .55) 0 22%, transparent 23%),
    radial-gradient(circle at 55% 68%, rgba(207, 228, 248, .55) 0 24%, transparent 25%);
}
.hb-deco-masks{
  left:7%;
  top:20%;
  width:150px;
  height:110px;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(247, 201, 216, .45) 0 38%, transparent 39%),
    radial-gradient(ellipse at 68% 50%, rgba(247, 201, 216, .35) 0 34%, transparent 35%);
}

.hb-beyond{
  padding:64px 0;
  background:
    radial-gradient(ellipse 50% 60% at 12% 20%, rgba(207, 228, 248, .55), transparent 60%),
    radial-gradient(ellipse 40% 50% at 88% 80%, rgba(200, 236, 212, .35), transparent 55%),
    linear-gradient(180deg, #eef5fb 0%, #f4f8fc 100%);
}
.hb-beyond-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(24px, 4vw, 48px);
  align-items:center;
}
.hb-beyond .hb-media{
  width:100%;
}
.hb-beyond-video{
  margin:0;
  width:100%;
  max-width:none;
}
.hb-beyond-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:clamp(28px, 4vw, 40px);
}

@media (max-width:980px){
  .hb-split,
  .hb-beyond-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hb-hero .hb-media{ order:2; }
  .hb-hero .hb-copy{ order:1; }
  .hb-split-media-first .hb-media{ order:1; }
  .hb-split-media-first .hb-copy{ order:2; }
  .hb-programme{ padding:36px 0; }
  .hb-beyond{ padding:48px 0; }
  .hb-stats{ margin-top:12px; }
}

@media (max-width:640px){
  .hb-hero{ padding:24px 0 12px; }
  .hb-icons{ gap:14px 16px; }
  .hb-icon-circle{ width:56px; height:56px; font-size:1.05rem; }
  .hb-stats{
    grid-template-columns:1fr;
    gap:6px;
    padding:14px 12px;
  }
  .hb-stat + .hb-stat::before{
    left:18%;
    right:18%;
    top:0;
    bottom:auto;
    width:auto;
    height:1px;
  }
  .hb-video-row{ grid-template-columns:1fr; }
}