/* Kids Club: new hero (ctg-) + Food Friends Universe (ffu-) styles */

.ctg-hero { background: rgb(255, 255, 255); padding: var(--section-gap) 0 0; position: relative; overflow: hidden; }

.ctg-hero::before { content: ""; position: absolute; inset: 0px; background: none; pointer-events: none; }

.ctg-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px){
  .ctg-hero-grid { grid-template-columns: 1fr; gap: 40px; }}

.ctg-hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(36, 52, 71, 0.12); border: 1px solid rgba(36, 52, 71, 0.25); border-radius: 50px; padding: 6px 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 18px; }

.ctg-hero-title { font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; color: var(--char); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; }

.ctg-hero-tag { font-size: 1.05rem; color: var(--navy-primary); font-weight: 600; margin-bottom: 16px; font-style: italic; }

.ctg-hero-desc { color: var(--brown); font-size: 0.95rem; line-height: 1.8; margin-bottom: 30px; max-width: 480px; }

.ctg-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ctg-hero-img { position: relative; display: flex; align-items: center; justify-content: center; }

.ctg-hero-scene { width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 24px 64px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.ctg-deco { position: absolute; pointer-events: none; }

.ctg-deco-heart { font-size: 1.2rem; animation: 3s ease-in-out 0s infinite normal none running ctg-float; }

.ctg-deco-leaf { font-size: 1rem; animation: 4s ease-in-out 0.8s infinite normal none running ctg-float; }

.ctg-deco-star { font-size: 0.9rem; animation: 3.5s ease-in-out 1.5s infinite normal none running ctg-float; }

.ctg-hero { background: rgb(255, 255, 255); padding: var(--section-gap) 0 0; position: relative; overflow: hidden; }

.ctg-hero::before { content: ""; position: absolute; inset: 0px; background: none; pointer-events: none; }

.ctg-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px){
  .ctg-hero-grid { grid-template-columns: 1fr; gap: 40px; }}

.ctg-hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(36, 52, 71, 0.12); border: 1px solid rgba(36, 52, 71, 0.25); border-radius: 50px; padding: 6px 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 18px; }

.ctg-hero-title { font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; color: var(--char); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; }

.ctg-hero-tag { font-size: 1.05rem; color: var(--navy-primary); font-weight: 600; margin-bottom: 16px; font-style: italic; }

.ctg-hero-desc { color: var(--brown); font-size: 0.95rem; line-height: 1.8; margin-bottom: 30px; max-width: 480px; }

.ctg-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ctg-hero-img { position: relative; display: flex; align-items: center; justify-content: center; }

.ctg-hero-scene { width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 24px 64px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.ctg-deco { position: absolute; pointer-events: none; }

.ctg-deco-heart { font-size: 1.2rem; animation: 3s ease-in-out 0s infinite normal none running ctg-float; }

.ctg-deco-leaf { font-size: 1rem; animation: 4s ease-in-out 0.8s infinite normal none running ctg-float; }

.ctg-deco-star { font-size: 0.9rem; animation: 3.5s ease-in-out 1.5s infinite normal none running ctg-float; }

.rhy-header, .prf-hero, .pmf-hero, .ff2-hero, .wp-hero, .prt-hero, .kids-hero, .wg-header, .ctg-hero, .hm-hero, .mk-hero, .hu-page-hero { background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%) !important; padding: 48px 24px 40px !important; text-align: center !important; color: rgb(255, 255, 255) !important; border-radius: 0px 0px 32px 32px !important; position: relative !important; overflow: hidden !important; min-height: auto !important; }

.rhy-header::before, .prf-hero::before, .pmf-hero::before, .ff2-hero::before, .wp-hero::before, .prt-hero::before, .kids-hero::before, .wg-header::before, .ctg-hero::before, .hm-hero::before, .mk-hero::before, .hu-page-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.1), transparent 34%), radial-gradient(circle at 82% 10%, rgba(180, 205, 230, 0.1), transparent 34%); pointer-events: none; z-index: 0; }

.rhy-header > *, .prf-hero > *, .pmf-hero > *, .ff2-hero > *, .wp-hero > *, .prt-hero > *, .kids-hero > *, .wg-header > *, .ctg-hero > *, .hm-hero > *, .mk-hero > *, .hu-page-hero > * { position: relative; z-index: 1; }

.rhy-title, .prf-welcome, .pmf-title, .ff2-hero h1, .ff2-hero em, .wp-hero h1, .wp-title, .prt-hero h1, .prt-title, .kids-hero h1, .kids-title, .wg-header h1, .wg-header h2, .wg-title, .ctg-hero h1, .ctg-hero-title, .hm-hero h1, .mk-hero h1, .hu-page-hero h1, .hu-page-hero h2 { color: rgb(255, 255, 255) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(1.9rem, 5vw, 2.8rem) !important; line-height: 1.12 !important; margin-bottom: 12px !important; letter-spacing: -0.02em !important; text-shadow: none !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; background-clip: unset !important; background-image: none !important; }

.rhy-subtitle, .prf-welcome-sub, .pmf-sub, .ff2-hero p, .ff2-hero-sub, .ff2-hero-support, .wp-hero p, .wp-hero-sub, .prt-hero p, .prt-subtitle, .kids-hero p, .kids-sub, .wg-header p, .wg-sub, .ctg-hero p, .ctg-hero-tag, .hm-hero p, .hm-hero-sub, .hm-hero em, .mk-hero p, .mk-hero-sub, .hu-page-hero p { color: rgba(255, 255, 255, 0.72) !important; font-size: 1rem !important; line-height: 1.75 !important; max-width: 580px !important; margin: 0px auto 20px !important; background: transparent !important; padding: 0px !important; text-shadow: none !important; }

.rhy-eyebrow, .prf-membership, .pmf-eyebrow, .ff2-eyebrow, .wp-eyebrow, .prt-eyebrow, .kids-eyebrow, .kids-hero .sl, .wg-eyebrow, .wg-header .sl, .ctg-hero-badge, .hm-hero-eyebrow, .hm-hero .sl, .mk-hero-eyebrow, .mk-hero .sl, .hu-page-hero .sl { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 50px !important; padding: 5px 15px !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 16px !important; box-shadow: none !important; }

.ctg-hero-grid { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }

.ctg-hero-grid > div:last-child { display: none !important; }

.rhy-header .tts-inline-btn, .prf-hero .tts-inline-btn, .pmf-hero .tts-inline-btn, .ff2-hero .tts-inline-btn, .wp-hero .tts-inline-btn, .prt-hero .tts-inline-btn, .kids-hero .tts-inline-btn, .wg-header .tts-inline-btn, .ctg-hero .tts-inline-btn, .hm-hero .tts-inline-btn, .mk-hero .tts-inline-btn, .hu-page-hero .tts-inline-btn { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: rgb(255, 255, 255) !important; }
@media (max-width: 768px){
  .rhy-header, .prf-hero, .pmf-hero, .ff2-hero, .wp-hero, .prt-hero, .kids-hero, .wg-header, .ctg-hero, .hm-hero, .mk-hero, .hu-page-hero { padding: 40px 18px 34px !important; border-radius: 0px 0px 26px 26px !important; }}

.rhy-header, .prf-hero, .pmf-hero, .discover-hero, .kitchen-hero, .mood-places-hero, .kids-hero, .little-chef-hero, .food-feels-hero, .wg-header, .community-hero, .prt-hero, .wp-hero, .mdm-header, .ff2-hero, .ctg-hero, .hm-hero, .hu-page-hero { background: linear-gradient(135deg, var(--hu-header-navy-1) 0%, var(--hu-header-navy-2) 100%) !important; padding: 48px 24px 40px !important; text-align: center !important; color: var(--hu-header-white) !important; border-radius: 0px 0px 32px 32px !important; position: relative !important; overflow: hidden !important; min-height: auto !important; }

.rhy-header::before, .prf-hero::before, .pmf-hero::before, .discover-hero::before, .kitchen-hero::before, .mood-places-hero::before, .kids-hero::before, .little-chef-hero::before, .food-feels-hero::before, .wg-header::before, .community-hero::before, .prt-hero::before, .wp-hero::before, .mdm-header::before, .ff2-hero::before, .ctg-hero::before, .hm-hero::before, .hu-page-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.1), transparent 34%), radial-gradient(circle at 82% 10%, rgba(180, 205, 230, 0.1), transparent 34%); pointer-events: none; }

.rhy-header > *, .prf-hero > *, .pmf-hero > *, .discover-hero > *, .kitchen-hero > *, .mood-places-hero > *, .kids-hero > *, .little-chef-hero > *, .food-feels-hero > *, .wg-header > *, .community-hero > *, .prt-hero > *, .wp-hero > *, .mdm-header > *, .ff2-hero > *, .ctg-hero > *, .hm-hero > *, .hu-page-hero > * { position: relative; z-index: 1; }

.rhy-title, .prf-welcome, .pmf-title, .discover-title, .kitchen-title, .mood-places-title, .kids-title, .little-chef-title, .food-feels-title, .wg-title, .community-title, .prt-title, .wp-hero h1, .mdm-title, .ff2-hero h1, .ctg-hero h1, .ctg-hero-title, .hm-hero h1, .hu-page-hero h1, .hu-page-hero h2 { color: rgb(255, 255, 255) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(1.9rem, 5vw, 2.8rem) !important; line-height: 1.12 !important; margin-bottom: 12px !important; letter-spacing: -0.02em !important; text-shadow: none !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; background-clip: unset !important; background-image: none !important; }

.rhy-subtitle, .prf-welcome-sub, .pmf-sub, .discover-sub, .kitchen-sub, .mood-places-sub, .kids-sub, .little-chef-sub, .food-feels-sub, .wg-sub, .community-sub, .prt-subtitle, .wp-hero-sub, .mdm-sub, .wp-hero p, .ff2-hero p, .ff2-hero-sub, .ff2-hero-support, .ctg-hero p, .ctg-hero-tag, .hm-hero p, .hm-hero-sub, .hu-page-hero p { color: rgba(255, 255, 255, 0.72) !important; font-size: 1rem !important; line-height: 1.75 !important; max-width: 580px !important; margin: 0px auto 20px !important; background: transparent !important; padding: 0px !important; }

.rhy-eyebrow, .prf-membership, .pmf-eyebrow, .discover-eyebrow, .kitchen-eyebrow, .mood-places-eyebrow, .kids-eyebrow, .little-chef-eyebrow, .food-feels-eyebrow, .wg-eyebrow, .community-eyebrow, .prt-eyebrow, .wp-eyebrow, .mdm-label, .ff2-eyebrow, .ctg-hero-badge, .hm-hero-eyebrow, .hm-hero .sl, .hu-page-hero .sl { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 50px !important; padding: 5px 15px !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 16px !important; box-shadow: none !important; }

.rhy-header button, .prf-hero button, .pmf-hero button, .discover-hero button, .kitchen-hero button, .mood-places-hero button, .kids-hero button, .little-chef-hero button, .food-feels-hero button, .community-hero button, .prt-hero button, .wp-hero button, .ff2-hero button, .ctg-hero button, .hm-hero button, .hu-page-hero button { position: relative; z-index: 2; }

.pmf-hero::after, .prf-hero-blur-1, .prf-hero-blur-2, .prf-hero-blur-3, .kids-img-hero-wrap, .hm-hero-right, .hm-hero-blob, .ctg-hero-grid > div:last-child img { display: none !important; }

.ctg-hero-grid { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }

.rhy-header .tts-inline-btn, .prf-hero .tts-inline-btn, .pmf-hero .tts-inline-btn, .ff2-hero .tts-inline-btn, .wp-hero .tts-inline-btn, .prt-hero .tts-inline-btn, .kids-hero .tts-inline-btn, .wg-header .tts-inline-btn, .ctg-hero .tts-inline-btn, .hm-hero .tts-inline-btn, .kitchen-hero .tts-inline-btn, .hu-page-hero .tts-inline-btn { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: rgb(255, 255, 255) !important; }

.rhy-header .tts-title-row, .prf-hero .tts-title-row, .pmf-hero .tts-title-row, .ff2-hero .tts-title-row, .wp-hero .tts-title-row, .prt-hero .tts-title-row, .kids-hero .tts-title-row, .wg-header .tts-title-row, .ctg-hero .tts-title-row, .hm-hero .tts-title-row, .kitchen-hero .tts-title-row, .hu-page-hero .tts-title-row { justify-content: center !important; width: fit-content !important; margin: 0px auto !important; }
@media (max-width: 768px){
  .rhy-header, .prf-hero, .pmf-hero, .discover-hero, .kitchen-hero, .mood-places-hero, .kids-hero, .little-chef-hero, .food-feels-hero, .wg-header, .community-hero, .prt-hero, .wp-hero, .mdm-header, .ff2-hero, .ctg-hero, .hm-hero, .hu-page-hero { padding: 40px 18px 34px !important; border-radius: 0px 0px 26px 26px !important; }}

.rd-hero *, .pp-hero *, .rp-hero *, .mp2-profile-hero *, .mfv-profile-hero *, .mfv-hero *, .ce-hero *, .ce-profile-hero *, .gd-hero * * *, .yt-hero *, .fftool-header *, .fflib-header *, .rhy-header *, .pmf-hero *, .prf-hero *, .wp-hero *, .wg-header *, .ff2-hero *, .hm-hero *, .hu-page-hero *, .ctg-hero * { color: rgb(255, 255, 255) !important; text-shadow: none !important; -webkit-text-fill-color: currentcolor !important; }

/* Food Friends Universe — kids hero banner (full-bleed edge-to-edge) */
#page-kids .ff-universe-hero{
  background:#ffffff;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  line-height:0;            /* removes inline-image baseline gap */
}

#page-kids .ff-universe-hero-img{
  display:block;
  width:100%;
  max-width:none;           /* was 1100px cap */
  height:auto;
  margin:0;
  border-radius:0;          /* square edges, flush to viewport */
}

/* Food Friends Universe — intro section + destination tiles */
#page-kids .ffu-intro{ background:#fff; padding:36px 16px 12px; }

#page-kids .ffu-intro-title{ color:#243447; margin:0 0 12px; }

#page-kids .ffu-intro-sub{
  color:var(--brown,#7a6b5d);
  font-size:1.02rem; line-height:1.6;
  max-width:640px; margin:0 auto 30px;
}

#page-kids .ffu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  max-width:820px;
  margin:0 auto;
  align-items:start;
}

#page-kids .ffu-cell{ transition:transform .25s ease; }

#page-kids .ffu-cell:hover{ transform:translateY(-6px); }

#page-kids .ffu-cell-img{
  display:block; width:100%; height:auto;
  border-radius:22px;
  box-shadow:0 12px 30px rgba(36,52,71,0.12);
  transition:box-shadow .25s ease;
}

#page-kids .ffu-cell:hover .ffu-cell-img{ box-shadow:0 18px 40px rgba(36,52,71,0.17); }
@media (max-width:640px){
  #page-kids .ffu-grid{ grid-template-columns:1fr; max-width:380px; gap:20px; }}

/* Township leader cards beside each tile */
.ffu-grid{ display:flex !important; flex-direction:column; gap:34px; max-width:720px !important;
  grid-template-columns:none !important; margin:0 auto !important; }

.ffu-row{ display:flex; gap:24px; align-items:center; justify-content:center; }

.ffu-leader{ flex:0 0 230px; width:230px; }

.ffu-leader .ff-card-wrap{ width:100%; margin:0; }

.ffu-leader .ff-card-wrap:hover .ff-card{ transform:none !important; }
  /* tap-to-enlarge like the originals; no hover flip */
.ffu-row .ffu-cell{ flex:0 1 380px; max-width:380px; margin:0; }

.ffu-leader-ph{ width:100%; aspect-ratio:1 / 1.3; border-radius:20px; border:2px dashed #d2b48c;
  background:linear-gradient(180deg,#ffffff,#fff8ea); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:14px; box-sizing:border-box; }
@media (max-width:640px){
  .ffu-row{ flex-direction:column; gap:16px; }
  .ffu-leader{ flex:0 0 auto; width:min(70vw,240px); }
  .ffu-row .ffu-cell{ flex:0 0 auto; width:min(86vw,330px); max-width:330px; }}

/* Make each leader card the SAME size as its township tile (symmetry) */
.ffu-row{ align-items:stretch !important; gap:24px; }

.ffu-leader{ flex:1 1 0 !important; width:auto !important; min-width:0; }

.ffu-row .ffu-cell{ flex:1 1 0 !important; max-width:none !important; min-width:0; margin:0; }

/* tile image defines the row height via its natural aspect */
.ffu-row .ffu-cell img.ffu-cell-img{ width:100%; height:auto; display:block; }

/* leader card fills the same frame (tile height) instead of its own 1.3 aspect */
.ffu-leader .ff-card-wrap{ width:100%; height:100%; margin:0; }

.ffu-leader .ff-card{ height:100% !important; padding-bottom:0 !important; }

.ffu-leader .ff-card-wrap:hover .ff-card{ transform:none !important; }

/* Billy placeholder also stretches to match */
.ffu-leader-ph{ width:100%; height:100% !important; aspect-ratio:auto !important; }

.ffu-grid{ max-width:760px !important; }
@media (max-width:640px){
  .ffu-row{ flex-direction:column; gap:16px; align-items:center !important; }
  .ffu-leader, .ffu-row .ffu-cell{ flex:0 0 auto !important; width:min(86vw,330px) !important; max-width:330px !important; }
  .ffu-leader .ff-card{ height:auto !important; padding-bottom:130% !important; }   /* restore aspect when stacked */
  .ffu-leader-ph{ height:auto !important; aspect-ratio:1 / 1.3 !important; }}

/* 2 townships (with their leaders) per row */
.ffu-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:34px 40px !important;
  max-width:1120px !important; margin:0 auto !important; align-items:start !important; }

.ffu-row{ display:flex !important; gap:14px !important; align-items:stretch !important; justify-content:center !important; }

.ffu-leader{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; }

.ffu-row .ffu-cell{ flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; }
@media (max-width:980px){
  .ffu-grid{ grid-template-columns:1fr !important; max-width:560px !important; }}
@media (max-width:560px){
  .ffu-row{ flex-direction:column !important; align-items:center !important; gap:14px !important; }
  .ffu-leader, .ffu-row .ffu-cell{ flex:0 0 auto !important; width:min(82vw,300px) !important; max-width:300px !important; }
  .ffu-leader .ff-card{ height:auto !important; padding-bottom:130% !important; }
  .ffu-leader-ph{ height:auto !important; aspect-ratio:1 / 1.3 !important; }}

@keyframes ctg-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes ctg-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}