/* ==========================================================================
   FunInKorea homepage bands
   Upcoming classes, learning styles, games, news, instructor, why, FAQ, contact.
   ========================================================================== */

/* ---------- Shared section heading ---------- */
.fik-section__head-main { min-width: 0; }

.fik-section__title { align-items: center; gap: 12px; }

.fik-section__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--fik-green-soft);
  color: var(--fik-green-deep);
}
.fik-section__title-icon svg { width: 19px; height: 19px; }
.fik-section__title-icon--calendar { background: #e6eefb; color: #2b5197; }
.fik-section__title-icon--game     { background: #eee7fa; color: #6d45ad; }
.fik-section__title-icon--news     { background: #e4f2f5; color: #1f7f8c; }
.fik-section__title-icon--faq      { background: #e6eefb; color: #2b5197; }
.fik-section__title-icon--style    { background: var(--fik-green-soft); color: var(--fik-green-deep); }

/* Handwriting accents used across the page. */
.fik-script {
  font-family: "Caveat", cursive;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--fik-navy);
  margin: 0;
}

/* Branded placeholder used wherever a photo has not been uploaded yet. */
.fik-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 96px;
  background: linear-gradient(140deg, #e8f4ec 0%, #dcecf7 100%);
  color: rgba(63, 157, 99, .6);
  font-family: var(--fik-font-head);
  font-size: 1.9rem;
  font-weight: 700;
}

/* ==========================================================================
   Upcoming Live Classes — row cards
   ========================================================================== */
.fik-class-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--fik-line);
  border-radius: var(--fik-radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fik-class-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--fik-shadow-lg);
  border-color: transparent;
}
.fik-class-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.fik-class-row__title {
  margin: 0;
  font-family: var(--fik-font-head);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fik-navy);
}
.fik-class-row__title a { color: inherit; text-decoration: none; }
.fik-class-row__title a:hover { color: var(--fik-green-deep); }

.fik-class-row__meta {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: .76rem;
  color: var(--fik-muted);
}
.fik-class-row__meta li { display: flex; align-items: center; gap: 7px; line-height: 1.45; }
.fik-class-row__icon { display: inline-flex; flex: none; color: var(--fik-green); }
.fik-class-row__icon svg { width: 14px; height: 14px; }

.fik-class-row__media {
  flex: none;
  width: 82px;
  border-radius: 10px;
  overflow: hidden;
  align-self: stretch;
  background: var(--fik-bg-alt);
}
.fik-class-row__photo,
.fik-class-row__media .fik-photo-placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
}

/* ==========================================================================
   Choose Your Learning Style
   ========================================================================== */
.fik-styles__note { color: var(--fik-muted); font-size: 1.22rem; }

.fik-style-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  gap: 10px;
  border-radius: var(--fik-radius-lg);
  overflow: hidden;
  padding: 24px;
}
.fik-style-card--group   { background: var(--fik-green-soft); }
.fik-style-card--private { background: var(--fik-navy-soft); }

.fik-style-card__body { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

.fik-style-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: #fff;
}
.fik-style-card--group .fik-style-card__icon   { background: var(--fik-green); }
.fik-style-card--private .fik-style-card__icon { background: #4b7fd1; }
.fik-style-card__icon svg { width: 23px; height: 23px; }

.fik-style-card__title {
  margin: 0;
  font-family: var(--fik-font-head);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--fik-navy);
}
.fik-style-card__text { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--fik-text); }

.fik-style-card__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.fik-style-card__list li {
  position: relative;
  padding-inline-start: 24px;
  font-size: .86rem;
  color: var(--fik-text);
}
.fik-style-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px; top: .34em;
  width: 11px; height: 6px;
  border-inline-start: 2px solid var(--fik-green-deep);
  border-block-end: 2px solid var(--fik-green-deep);
  transform: rotate(-45deg);
}
.fik-style-card--private .fik-style-card__list li::before {
  border-color: #2b5197;
}

.fik-style-card__cta { align-self: flex-start; margin-top: auto; }

.fik-style-card__media { position: relative; display: flex; align-items: flex-end; }
.fik-style-card__photo,
.fik-style-card__media .fik-photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--fik-radius);
  display: block;
}
.fik-style-card__note {
  position: absolute;
  top: -2px; right: 0;
  text-align: right;
  font-size: 1.05rem;
  color: var(--fik-navy);
  max-width: 9em;
  z-index: 2;
}

/* ==========================================================================
   Games + News side by side
   ========================================================================== */
.fik-home-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 40px;
  align-items: start;
}
.fik-games__inner, .fik-news__inner { min-width: 0; }

/* When used inside the duo, the bands drop their own padding/container. */
.fik-home-duo .fik-section { padding-block: 0; }

.fik-game-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 14px 16px;
  border-radius: var(--fik-radius);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 132px;
}
.fik-game-tile:hover { transform: translateY(-3px); box-shadow: var(--fik-shadow); }
.fik-game-tile--flashcard { background: #e8f4ec; }
.fik-game-tile--quiz      { background: #fdeaef; }
.fik-game-tile--puzzle    { background: #e9f3ec; }
.fik-game-tile--listen    { background: #e8f1fb; }

.fik-game-tile__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: #fff;
  margin-bottom: 12px;
  box-shadow: 0 2px 7px rgba(19, 48, 93, .07);
}
.fik-game-tile__art svg { width: 24px; height: 24px; }
.fik-game-tile--flashcard .fik-game-tile__art { color: #2f7d4d; }
.fik-game-tile--quiz .fik-game-tile__art      { color: #c0395f; }
.fik-game-tile--puzzle .fik-game-tile__art    { color: #3f9d63; }
.fik-game-tile--listen .fik-game-tile__art    { color: #2b5197; }

.fik-game-tile__name {
  font-family: var(--fik-font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--fik-navy);
}
.fik-game-tile__sub { font-size: .78rem; color: var(--fik-muted); }

/* News cards */
.fik-news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fik-line);
  border-radius: var(--fik-radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fik-news-card:hover { transform: translateY(-3px); box-shadow: var(--fik-shadow-lg); }
.fik-news-card__media { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--fik-bg-alt); }
.fik-news-card__photo,
.fik-news-card__media .fik-photo-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.fik-news-card__body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fik-badge--topic { background: var(--fik-green-soft); color: var(--fik-green-deep); align-self: flex-start; font-size: .66rem; letter-spacing: .05em; }
.fik-news-card__title {
  margin: 0;
  font-family: var(--fik-font-head);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.36;
  color: var(--fik-navy);
}
.fik-news-card__title a { color: inherit; text-decoration: none; }
.fik-news-card__title a:hover { color: var(--fik-green-deep); }
.fik-news-card__date { margin-top: auto; font-size: .76rem; color: var(--fik-muted); }

/* ==========================================================================
   Instructor + Why + FAQ triptych
   ========================================================================== */
.fik-home-trio {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}

.fik-instructor__body { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 16px; }
.fik-instructor__copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fik-instructor__copy p { margin: 0; font-size: .88rem; line-height: 1.62; color: var(--fik-text); }
.fik-instructor__media { margin: 0; position: relative; }
.fik-instructor__photo,
.fik-instructor__media .fik-photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--fik-radius);
  display: block;
}
.fik-instructor__note { margin-top: 8px; font-size: 1.02rem; color: var(--fik-navy); text-align: center; }

.fik-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fik-why__item { display: flex; align-items: center; gap: 11px; font-size: .87rem; color: var(--fik-text); }
.fik-why__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 9px;
  background: var(--fik-green-soft);
  color: var(--fik-green-deep);
}
.fik-why__icon svg { width: 16px; height: 16px; }

/* FAQ accordion */
.fik-faq__head { margin-bottom: 18px; align-items: center; }
.fik-faq__list { display: grid; gap: 8px; }
.fik-faq__item {
  border: 1px solid var(--fik-line);
  border-radius: var(--fik-radius-sm);
  background: #fff;
  overflow: hidden;
}
.fik-faq__item[open] { border-color: var(--fik-green); }
.fik-faq__q {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 500;
  color: var(--fik-navy);
  list-style: none;
}
.fik-faq__q::-webkit-details-marker { display: none; }
.fik-faq__q:focus-visible { outline: 3px solid var(--fik-green); outline-offset: -3px; }
.fik-faq__marker {
  position: relative;
  width: 15px; height: 15px;
  flex: none;
  color: var(--fik-green-deep);
}
.fik-faq__marker::before,
.fik-faq__marker::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.fik-faq__marker::before { inset-inline-start: 0; top: 6.5px; width: 15px; height: 2px; }
.fik-faq__marker::after  { inset-inline-start: 6.5px; top: 0; width: 2px; height: 15px; }
.fik-faq__item[open] .fik-faq__marker::after { transform: rotate(90deg); opacity: 0; }
.fik-faq__a { padding: 0 14px 14px 40px; }
.fik-faq__a p { margin: 0; font-size: .84rem; line-height: 1.62; color: var(--fik-text); }

/* ==========================================================================
   Get in Touch
   ========================================================================== */
.fik-contact { background: var(--fik-green-mist); }
.fik-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}
.fik-contact__links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 13px; }
.fik-contact__links li { display: flex; align-items: center; gap: 11px; font-size: .9rem; }
.fik-contact__links a { color: var(--fik-text); text-decoration: none; }
.fik-contact__links a:hover { color: var(--fik-green-deep); text-decoration: underline; }
.fik-contact__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px; background: #fff; color: var(--fik-green-deep);
  box-shadow: 0 2px 6px rgba(19, 48, 93, .06);
}
.fik-contact__icon svg { width: 16px; height: 16px; }

.fik-contact__card {
  position: relative;
  background: linear-gradient(135deg, #e3f3ea 0%, #eef7f1 100%);
  border-radius: var(--fik-radius-lg);
  padding: 30px 34px;
  overflow: hidden;
}
.fik-contact__title {
  margin: 0 0 6px;
  font-family: var(--fik-font-head);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--fik-navy);
  max-width: 12ch;
}
.fik-contact__text { margin: 0 0 18px; font-size: .88rem; color: var(--fik-text); }
.fik-contact__hangul {
  position: absolute;
  right: 24px; bottom: 18px;
  font-size: 1.5rem;
  text-align: right;
  color: var(--fik-green-deep);
  line-height: 1.25;
  opacity: .85;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .fik-home-duo { grid-template-columns: 1fr; gap: 44px; }
  .fik-home-trio { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fik-faq { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .fik-style-card { grid-template-columns: 1fr; }
  .fik-style-card__media { order: -1; max-width: 260px; }
  .fik-style-card__note { position: static; text-align: left; max-width: none; margin-bottom: 6px; }
  .fik-contact__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  .fik-home-trio { grid-template-columns: 1fr; }
  .fik-instructor__body { grid-template-columns: 1fr; }
  .fik-instructor__media { max-width: 220px; }
}

@media (max-width: 560px) {
  .fik-class-row__media { width: 72px; }
  .fik-contact__hangul { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fik-class-row, .fik-news-card, .fik-game-tile { transition: none; }
  .fik-class-row:hover, .fik-news-card:hover, .fik-game-tile:hover { transform: none; }
}

/* ==========================================================================
   Image slot sizing
   The shared placeholder is a flex box, so each slot has to state how it
   should fill — otherwise it collapses to its own min-height.
   ========================================================================== */
.fik-class-row__media { display: flex; }
.fik-class-row__media > * { flex: 1; min-height: 0; }

.fik-style-card__media { display: flex; align-items: flex-end; }
.fik-style-card__media > .fik-photo-placeholder,
.fik-style-card__media > .fik-style-card__photo {
  height: auto;
  align-self: stretch;
}

.fik-instructor__media .fik-photo-placeholder { height: auto; }
.fik-news-card__media { display: flex; }
.fik-news-card__media > * { flex: 1; min-height: 0; }

/* Section heads keep the "View all" action on the heading's line. */
.fik-section__head { flex-wrap: nowrap; align-items: center; }
.fik-section__head > .fik-btn { flex: none; }
@media (max-width: 620px) {
  .fik-section__head { flex-wrap: wrap; align-items: flex-start; }
}

/* The games band sits in the narrower half of the duo, so its tiles need to
   stay legible at ~150px wide. */
.fik-games__grid { gap: 12px; }
.fik-game-tile { padding: 14px 12px; min-height: 124px; }
.fik-game-tile__name { font-size: .86rem; line-height: 1.25; }
.fik-game-tile__sub { font-size: .74rem; line-height: 1.3; }
.fik-game-tile__art { width: 40px; height: 40px; margin-bottom: 10px; }
.fik-game-tile__art svg { width: 21px; height: 21px; }

/* In the duo the heading shares a narrower column with its action button, so
   it needs a slightly smaller size to stay on one line. */
.fik-home-duo .fik-section__title,
.fik-elem-col .fik-games .fik-section__title,
.fik-elem-col .fik-news .fik-section__title { font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); }
.fik-home-duo .fik-section__head,
.fik-elem-col .fik-section__head { align-items: center; gap: 12px; }
.fik-home-duo .fik-section__sub,
.fik-elem-col .fik-section__sub { margin-top: 4px; }

/* The trio headings sit in narrow columns and are a size down from the main
   band headings in the design. */
.fik-home-trio .fik-section__title,
.fik-elem-col .fik-instructor .fik-section__title,
.fik-elem-col .fik-why .fik-section__title,
.fik-elem-col .fik-faq .fik-section__title { font-size: clamp(1.05rem, .9rem + .4vw, 1.28rem); }
.fik-home-trio .fik-section__title-icon,
.fik-elem-col .fik-instructor .fik-section__title-icon,
.fik-elem-col .fik-why .fik-section__title-icon,
.fik-elem-col .fik-faq .fik-section__title-icon { width: 28px; height: 28px; border-radius: 9px; }
.fik-home-trio .fik-section__title-icon svg,
.fik-elem-col .fik-section__title-icon svg { width: 16px; height: 16px; }
.fik-home-trio .fik-section__head,
.fik-elem-col .fik-section__head { margin-bottom: 18px; }
.fik-faq__head .fik-section__sub { margin: 0; }

/* ==========================================================================
   Korean Games page
   ========================================================================== */
.fik-section__title-icon--level { background: #eee7fa; color: #6d45ad; }

.fik-levels__grid { align-items: stretch; }

.fik-level-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--fik-line);
  border-radius: var(--fik-radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fik-level-card:hover { transform: translateY(-3px); box-shadow: var(--fik-shadow-lg); border-color: transparent; }
.fik-level-card--beginner     { border-top: 3px solid var(--fik-level-beginner-fg); }
.fik-level-card--intermediate { border-top: 3px solid var(--fik-level-intermediate-fg); }
.fik-level-card--advanced     { border-top: 3px solid var(--fik-level-advanced-fg); }

.fik-level-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fik-level-card__lock { display: inline-flex; color: var(--fik-muted); }
.fik-level-card__lock svg { width: 16px; height: 16px; }

.fik-level-card__title {
  margin: 0;
  font-family: var(--fik-font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--fik-navy);
}
.fik-level-card__count { margin: 0; font-size: .8rem; color: var(--fik-muted); }

.fik-level-card__types { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 7px; }
.fik-level-card__types li {
  display: flex; align-items: center; gap: 9px;
  font-size: .82rem; color: var(--fik-text);
}
.fik-level-card__type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 7px; background: var(--fik-bg-alt); color: var(--fik-green-deep);
}
.fik-level-card__type-icon svg { width: 14px; height: 14px; }
.fik-level-card__type-name { flex: 1; min-width: 0; }
.fik-level-card__type-n {
  font-family: var(--fik-font-head); font-weight: 600;
  font-size: .78rem; color: var(--fik-navy);
  background: var(--fik-bg-alt); border-radius: var(--fik-radius-pill);
  padding: 2px 9px;
}
.fik-level-card .fik-btn { margin-top: auto; }
.fik-level-card .fik-btn svg { width: 16px; height: 16px; }

/* Game type explainers */
.fik-gametype {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--fik-line);
  border-radius: var(--fik-radius);
  scroll-margin-top: 110px;
}
.fik-gametype__art {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 4px;
}
.fik-gametype__art svg { width: 24px; height: 24px; }
.fik-gametype--flashcard .fik-gametype__art { background: #e8f4ec; color: #2f7d4d; }
.fik-gametype--quiz .fik-gametype__art      { background: #fdeaef; color: #c0395f; }
.fik-gametype--puzzle .fik-gametype__art    { background: #e9f3ec; color: #3f9d63; }
.fik-gametype--listen .fik-gametype__art    { background: #e8f1fb; color: #2b5197; }

.fik-gametype__name {
  margin: 0;
  font-family: var(--fik-font-head);
  font-size: 1rem; font-weight: 600; color: var(--fik-navy);
}
.fik-gametype__text { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--fik-text); }
.fik-gametype__count { margin: 0; font-size: .76rem; color: var(--fik-muted); }
.fik-gametype__link {
  margin-top: auto; padding-top: 6px;
  font-family: var(--fik-font-head); font-weight: 600; font-size: .82rem;
  color: var(--fik-green-deep); text-decoration: none;
}
.fik-gametype__link:hover { text-decoration: underline; }

/* ---------- Page intro (games, and any page using the full-width layout) ---------- */
.fik-page-intro { padding-block: 40px 4px; }
.fik-page-intro__title {
  margin: 0 0 10px;
  font-family: var(--fik-font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.14;
  color: var(--fik-navy);
}
.fik-page-intro__text {
  margin: 0;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fik-text);
}

/* ==========================================================================
   Elementor bridge
   Pages are Elementor documents; each FunInKorea section is a widget inside a
   container. Elementor containers are flex by default, so these rules stop the
   widgets' own section padding from doubling up and let them fill their column.
   ========================================================================== */

/* A container carrying .fik-section supplies the vertical rhythm, so the
   widget's own section inside it must not add a second helping. */
.fik-elem-band .fik-section { padding-block: 0; }

/* Columns in a duo/trio row. */
.fik-elem-col { min-width: 0; }
.fik-elem-col > .fik-section,
.fik-elem-col .fik-section { padding-block: 0; }

/* Inside an Elementor column the section already sits in a padded band, so its
   own container should not re-apply the page gutter. */
.fik-elem-col .fik-container,
.fik-elem-col .fik-games__inner,
.fik-elem-col .fik-news__inner { padding-inline: 0; }

/* The row itself is the page container. */
.fik-elem-row {
  max-width: none;
  padding-inline: max(20px, calc((100% - var(--fik-container, 1320px)) / 2));
  align-items: flex-start;
}

/* Widgets stretch to their column. */
.fik-elem-col > .elementor-widget,
.fik-elem-col > .elementor-element { width: 100%; }

/* Elementor wraps every widget; make sure our sections are not clipped. */
.elementor-widget-fik_hero,
.elementor-widget-fik_hero .elementor-widget-container { overflow: visible; }

/* The hero already breaks out to full width; inside an Elementor container the
   container is already full-bleed, so cancel the negative margin. */
.elementor-element .fik-hero { width: 100%; max-width: none; margin-inline: 0; }

/* Page intro heading/text inside an Elementor band. */
.fik-elem-band.fik-page-intro { padding-block: 40px 4px; }
.fik-elem-band.fik-page-intro > .e-con-inner,
.fik-elem-band.fik-page-intro {
  padding-inline: max(20px, calc((100% - var(--fik-container, 1320px)) / 2));
}
.fik-elem-band.fik-page-intro .elementor-widget-heading { margin-bottom: 10px; }

/* Headings in a narrow Elementor column must not wrap away from their action
   button; allow the heading to shrink and keep the button on the same line. */
.fik-elem-col .fik-section__head { flex-wrap: nowrap; }
.fik-elem-col .fik-section__head-main { min-width: 0; flex: 1; }
.fik-elem-col .fik-section__title { min-width: 0; }
@media (max-width: 900px) {
  .fik-elem-col .fik-section__head { flex-wrap: wrap; }
}

/* Elementor's Heading widget puts our class on the wrapper, not the <h1>, and
   styles the heading from the global kit. Carry the brand type through. */
.fik-page-intro__title .elementor-heading-title,
.fik-page-intro__title h1,
.fik-page-intro__title h2 {
  font-family: var(--fik-font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.14;
  color: var(--fik-navy);
  margin: 0;
}
.fik-page-intro__text,
.fik-page-intro__text p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fik-text);
}
.fik-page-intro__text p { margin: 0; max-width: 70ch; }

/* Prose blocks inside Elementor text editors. */
.fik-prose h2 {
  font-family: var(--fik-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fik-navy);
  margin: 0 0 10px;
}
.fik-prose p { font-size: .92rem; line-height: 1.65; color: var(--fik-text); margin: 0 0 14px; }
.fik-prose .fik-btn { margin-top: 4px; }

/* ==========================================================================
   Approved-mockup refinements
   ========================================================================== */

/* --- Upcoming classes: always a four-up grid ---------------------------- */
/* With only two classes published the cards must keep the width they would
   have in a full row of four, rather than stretching across the page. */
.fik-classes-section .fik-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: start;
}
@media (max-width: 1100px) { .fik-classes-section .fik-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .fik-classes-section .fik-grid--4 { grid-template-columns: 1fr; } }

/* Narrow vertical thumbnail, as in the mockup. */
.fik-class-row { padding: 12px; gap: 12px; align-items: stretch; }
.fik-class-row__media { width: 74px; border-radius: 11px; }
.fik-class-row__title { font-size: .9rem; }

/* --- Hero proportions --------------------------------------------------- */
.fik-hero__inner { padding-block: 44px 46px; align-items: center; }
.fik-hero__portrait { aspect-ratio: 16 / 11; border-radius: 20px; overflow: hidden; }
.fik-hero__photo { border-radius: 20px; }
.fik-hero__title { font-size: clamp(2.2rem, 1.5rem + 2.7vw, 3.5rem); }
.fik-hero__text { font-size: 1rem; margin-bottom: 26px; }
.fik-hero__actions { margin-bottom: 34px; }
.fik-hero__actions .fik-btn { padding: 13px 26px; font-size: .95rem; }
.fik-hero__features { gap: 14px; }
.fik-hero__feature-icon { width: 36px; height: 36px; border-radius: 11px; }
.fik-hero__feature-icon svg { width: 18px; height: 18px; }

/* Keep the decorative notes from fighting the photograph. */
.fik-hero__bubble { font-size: 1.05rem; max-width: 168px; padding: 12px 16px; }
.fik-hero__note--greeting { font-size: 1.08rem; }
.fik-hero__note-lead { font-size: 1.4rem; }
.fik-hero__note--brighter { font-size: 1rem; }
.fik-hero__stack { width: min(190px, 42%); }
.fik-hero__book { font-size: .72rem; padding: 7px 12px; }

/* --- Learning style cards ---------------------------------------------- */
.fik-style-card { padding: 22px; gap: 18px; grid-template-columns: minmax(0, 1fr) 36%; }
.fik-style-card__photo,
.fik-style-card__media .fik-photo-placeholder { aspect-ratio: 3 / 4; border-radius: 13px; }
.fik-style-card__title { font-size: 1.14rem; }
.fik-style-card__icon { width: 42px; height: 42px; }
.fik-style-card__icon svg { width: 21px; height: 21px; }

/* --- Game tiles: add the Play Now affordance ---------------------------- */
.fik-game-tile { min-height: 0; padding: 15px 14px; gap: 2px; }
.fik-game-tile__play {
  margin-top: 9px;
  font-family: var(--fik-font-head);
  font-weight: 600;
  font-size: .76rem;
  color: var(--fik-green-deep);
}
.fik-game-tile:hover .fik-game-tile__play { text-decoration: underline; }

/* --- Instructor / Why / FAQ: keep the row compact ----------------------- */
.fik-instructor__body { grid-template-columns: minmax(0, 1fr) 38%; gap: 14px; }
.fik-instructor__photo,
.fik-instructor__media .fik-photo-placeholder { aspect-ratio: 1 / 1; border-radius: 13px; }
.fik-instructor__copy p { font-size: .86rem; }
.fik-why__list { gap: 9px; }
.fik-why__item { font-size: .85rem; }
.fik-why__icon { width: 26px; height: 26px; border-radius: 8px; }
.fik-why__icon svg { width: 15px; height: 15px; }
.fik-faq__q { padding: 10px 13px; font-size: .83rem; }
.fik-faq__a { padding: 0 13px 12px 37px; }

/* --- Contact band: slim -------------------------------------------------- */
.fik-contact__card { padding: 26px 30px; }
.fik-contact__title { font-size: 1.32rem; }
.fik-contact__inner { gap: 34px; }

/* --- Learning style: stop the handwritten note covering the photo ------ */
/* Absolute positioning put it directly on top of the 1:1 portrait. Placing
   it in flow above the image keeps the accent without the collision. */
.fik-style-card__media { flex-direction: column; gap: 8px; }
.fik-style-card__note {
  position: static;
  text-align: right;
  max-width: none;
  margin: 0;
  font-size: .95rem;
  line-height: 1.25;
}
.fik-style-card__media > .fik-style-card__photo,
.fik-style-card__media > .fik-photo-placeholder { margin-top: auto; }