/*
Theme Name: BG Web
Theme URI: https://bintanggemilang.sch.id/
Author: Bintang Gemilang
Description: Bintang Gemilang custom block theme. M5.2 TKIT real content and photography integration.
Version: 0.7.1
Requires at least: 6.6
Requires PHP: 8.3
Text Domain: bg-web
*/

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--wp--preset--color--heritage-amber);
  outline-offset: 3px;
}

/* ---------------------------------------------
 * M2.2 - component primitives
 * --------------------------------------------- */

.bg-section {
  padding-block: var(--wp--preset--spacing--90);
}

.bg-section--compact {
  padding-block: var(--wp--preset--spacing--70);
}

.bg-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.bg-muted { color: var(--wp--preset--color--muted); }

.bg-surface-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  background: var(--wp--preset--color--soft-white);
  overflow: clip;
}

.bg-editorial-card {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

.bg-editorial-card__body {
  padding: var(--wp--preset--spacing--50);
}

.bg-editorial-card .wp-block-post-featured-image,
.bg-editorial-card .wp-block-image {
  margin: 0;
}

.bg-editorial-card .wp-block-image img,
.bg-editorial-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.bg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  text-decoration: none;
}

.bg-link-arrow::after { content: "→"; }
.bg-link-arrow:hover { text-decoration: underline; }

.bg-nav-shell {
  border-bottom: 1px solid var(--wp--preset--color--border);
  background: rgba(250, 250, 250, 0.96);
}

.bg-nav-shell .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
}

.bg-nav-shell .wp-block-navigation-item__content[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--heritage-amber);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.28em;
}

.bg-nav-shell .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--soft-white);
}

.bg-footer {
  border-top: 1px solid rgba(255,255,255,.16);
}

.bg-footer a { color: inherit; }

.bg-cta-panel {
  border-radius: 14px;
  overflow: clip;
}

.bg-cta-panel .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* Buttons */
.wp-element-button, .wp-block-button__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.78em 1.15em;
  border: 1px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--heritage-indigo);
  border-color: var(--wp--preset--color--heritage-indigo);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--indigo-soft);
}

/* CTA outline variants on Heritage Indigo surfaces. Keep normal state visible. */
.bg-cta-panel .wp-block-button.is-style-outline .wp-block-button__link,
.bg-section.has-heritage-indigo-background-color .bg-home-actions .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--soft-white);
  border-color: var(--wp--preset--color--soft-white);
  background: transparent;
}

.bg-cta-panel .wp-block-button.is-style-outline .wp-block-button__link:hover,
.bg-section.has-heritage-indigo-background-color .bg-home-actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--heritage-indigo);
  border-color: var(--wp--preset--color--soft-white);
  background: var(--wp--preset--color--soft-white);
}

.bg-cta-panel .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.bg-section.has-heritage-indigo-background-color .bg-home-actions .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--heritage-indigo);
  background: var(--wp--preset--color--soft-white);
  outline-color: var(--wp--preset--color--heritage-amber);
}

.wp-block-button.is-style-bg-amber .wp-block-button__link {
  background: var(--wp--preset--color--heritage-amber);
  color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-bg-text .wp-block-button__link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--heritage-indigo);
}

.wp-block-button.is-style-bg-text .wp-block-button__link::after { content: "→"; }

/* Images */
.wp-block-image img { display: block; }

.bg-image-editorial img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.bg-image-landscape img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 781px) {
  .bg-section { padding-block: var(--wp--preset--spacing--70); }
  .bg-section--compact { padding-block: var(--wp--preset--spacing--60); }
  .bg-editorial-card__body { padding: var(--wp--preset--spacing--40); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---------------------------------------------
 * M2.3 - responsive rules & visual rhythm
 * --------------------------------------------- */

:where(.bg-section, .bg-section--compact) > .wp-block-group__inner-container,
:where(.bg-section, .bg-section--compact) .alignwide {
  width: min(100%, var(--wp--style--global--wide-size));
}

.bg-reading-width { max-width: 760px; }
.bg-story-width { max-width: 920px; }
.bg-wide-canvas { max-width: 1240px; }

.bg-heading-balance,
.bg-section h1,
.bg-section h2,
.bg-cta-panel h2 {
  text-wrap: balance;
}

.bg-copy-balance { text-wrap: pretty; }

.bg-grid-2,
.bg-grid-3 {
  display: grid;
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}

.bg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* M3.2 micro-fix: WordPress blockGap can add top margin to grid children
 * after the first child. Grid gap owns spacing inside BG grids, so reset
 * those per-child margins to keep every desktop row top-aligned. */
.bg-grid-2 > *,
.bg-grid-3 > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

.bg-media-frame {
  overflow: clip;
  border-radius: 14px;
  background: var(--wp--preset--color--indigo-soft);
}

.bg-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-media-landscape { aspect-ratio: 16 / 9; }
.bg-media-editorial { aspect-ratio: 4 / 5; }
.bg-media-story { aspect-ratio: 3 / 2; }

.bg-action-primary-row .wp-block-button,
.bg-action-primary-row .wp-block-button__link { width: 100%; }
.bg-action-primary-row .wp-block-button__link { justify-content: center; }

.bg-action-secondary-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40) !important;
}
.bg-action-secondary-row .wp-block-button,
.bg-action-secondary-row .wp-block-button__link { width: 100%; }

.bg-text-action {
  display: inline-flex;
  gap: .4em;
  align-items: center;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  color: var(--wp--preset--color--heritage-indigo);
  text-decoration: none;
}
.bg-text-action::after { content: "→"; }

/* Tablet */
@media (max-width: 1024px) {
  .bg-section { padding-block: var(--wp--preset--spacing--80); }
  .bg-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-footer .wp-block-columns { gap: var(--wp--preset--spacing--50); }
}

/* Mobile */
@media (max-width: 781px) {
  .bg-section { padding-block: var(--wp--preset--spacing--70); }
  .bg-section--compact { padding-block: var(--wp--preset--spacing--60); }
  .bg-grid-2,
  .bg-grid-3 { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
  .bg-editorial-card__body { padding: var(--wp--preset--spacing--40); }
  .bg-nav-shell { position: relative; }
  .bg-nav-shell > .wp-block-group { gap: var(--wp--preset--spacing--30); }
  .bg-cta-panel { border-radius: 12px; }
  .bg-cta-panel > * { max-width: 100%; }
  .bg-media-landscape { aspect-ratio: 4 / 3; }
  .bg-media-story { aspect-ratio: 4 / 3; }
  .bg-footer .wp-block-columns { gap: var(--wp--preset--spacing--50); }
  .bg-footer .wp-block-navigation__container { gap: .7rem; }
}

/* Narrow mobile */
@media (max-width: 480px) {
  .bg-section { padding-block: var(--wp--preset--spacing--60); }
  .bg-section--compact { padding-block: var(--wp--preset--spacing--50); }
  .bg-action-secondary-row { gap: var(--wp--preset--spacing--30) !important; }
  .bg-action-secondary-row .wp-block-button__link { padding-inline: .75em; }
  .bg-editorial-card__body { padding: var(--wp--preset--spacing--40); }
  .bg-cta-panel { border-radius: 10px; }
}


/* ---------------------------------------------
 * M3.1 - SDIT homepage story architecture shell
 * --------------------------------------------- */
.bg-home-hero {
  position: relative;
  overflow: clip;
}

.bg-home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}

.bg-home-hero__media,
.bg-photo-placeholder {
  min-height: 460px;
  border-radius: 14px;
  background: var(--wp--preset--color--indigo-soft);
  border: 1px solid var(--wp--preset--color--border);
  display: grid;
  place-items: center;
  padding: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--heritage-indigo);
  text-align: center;
}

.bg-photo-placeholder--landscape { min-height: 360px; }
.bg-photo-placeholder--portrait { min-height: 520px; }

.bg-photo-placeholder strong {
  font-family: var(--wp--preset--font-family--display);
  display: block;
  margin-bottom: .4rem;
}

.bg-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}

.bg-home-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}

.bg-home-pillar {
  border-top: 3px solid var(--wp--preset--color--heritage-amber);
  padding-top: var(--wp--preset--spacing--40);
}

.bg-home-pillar__number {
  color: var(--wp--preset--color--heritage-amber);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--caption);
}

.bg-home-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}

.bg-home-story-grid--reverse {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.bg-home-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}

.bg-home-feature {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--40);
}

.bg-home-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}

.bg-home-person__photo {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.bg-home-note {
  border-left: 4px solid var(--wp--preset--color--heritage-amber);
  padding-left: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
  .bg-home-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-home-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
  .bg-home-hero__grid,
  .bg-home-story-grid,
  .bg-home-story-grid--reverse {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--60);
  }
  .bg-home-hero__media,
  .bg-photo-placeholder--landscape { min-height: 280px; }
  .bg-photo-placeholder--portrait { min-height: 360px; }
  .bg-home-pillars,
  .bg-home-feature-list,
  .bg-home-people { grid-template-columns: 1fr; }
  .bg-home-actions { flex-direction: column; align-items: stretch; }
  .bg-home-actions .wp-block-button,
  .bg-home-actions .wp-block-button__link { width: 100%; }
}


/* ---------------------------------------------
 * M3.2 - Real photography integration, pass 1
 * Content editable, composition protected.
 * --------------------------------------------- */
.bg-home-photo {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--indigo-soft);
}

.bg-home-photo .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-home-photo--hero {
  min-height: 460px;
}

.bg-home-photo--learning {
  min-height: 430px;
}

.bg-home-photo .wp-block-cover__inner-container:empty {
  display: none;
}

@media (max-width: 781px) {
  .bg-home-photo--hero { min-height: 320px; }
  .bg-home-photo--learning { min-height: 300px; }
}


/* ---------------------------------------------
 * M3.2 - Real content & photography integration, pass 2
 * Stories, pillars and people.
 * --------------------------------------------- */
.bg-home-story-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}

.bg-home-story-card {
  min-width: 0;
}

.bg-home-photo--story {
  min-height: 360px;
}

.bg-home-photo--person {
  min-height: 430px;
  aspect-ratio: 4 / 5;
}

.bg-home-photo--person .wp-block-cover__image-background {
  object-position: center 22%;
}

@media (max-width: 1024px) {
  .bg-home-story-cards { grid-template-columns: 1fr; }
}

@media (max-width: 781px) {
  .bg-home-photo--story { min-height: 300px; }
  .bg-home-photo--person { min-height: 360px; }
}


/* ---------------------------------------------
 * M3.2 micro-fix v0.5.3: reset WordPress blockGap margins
 * on the actual homepage grid containers. Grid gap owns
 * the spacing; direct children must begin on the same row.
 * --------------------------------------------- */
.bg-home-pillars > *,
.bg-home-story-cards > *,
.bg-home-people > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* ---------------------------------------------
 * M4.2 - Internal pages & structured content
 * --------------------------------------------- */
.bg-internal-hero {
  padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--70);
  padding-inline: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* M4.3 micro-fix v0.6.2: guarantee a safe horizontal gutter on
 * constrained internal/archive sections at narrow viewport widths. */
.bg-internal-hero + .bg-section,
main > .bg-section {
  padding-inline: var(--wp--preset--spacing--40);
}

.bg-internal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}

.bg-internal-grid > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  min-width: 0;
}

.bg-archive-card {
  height: 100%;
  border-top: 3px solid var(--wp--preset--color--heritage-amber);
  padding-top: var(--wp--preset--spacing--40);
}

.bg-archive-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

.bg-single-featured img {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  border-radius: 14px;
}

.bg-content-meta {
  margin-block: 0 var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--heritage-amber);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bg-achievement-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--wp--preset--spacing--60) 0;
  background: var(--wp--preset--color--border);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
}

.bg-achievement-meta__row {
  background: var(--wp--preset--color--soft-white);
  padding: var(--wp--preset--spacing--40);
}

.bg-achievement-meta dt {
  color: var(--wp--preset--color--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bg-achievement-meta dd {
  margin: .35rem 0 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  color: var(--wp--preset--color--heritage-indigo);
}

.bg-internal-toc {
  border-left: 3px solid var(--wp--preset--color--heritage-amber);
  padding-left: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
  .bg-internal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
  .bg-internal-hero { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
  .bg-internal-grid { grid-template-columns: 1fr; }
  .bg-achievement-meta { grid-template-columns: 1fr; }

  /* M4.3 micro-fix v0.6.3: direct template titles sit outside
   * patterned .bg-section wrappers in page/single/archive templates.
   * Give those titles the same safe mobile gutter as internal content. */
  main > .wp-block-post-title,
  main > .wp-block-query-title {
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--wp--preset--spacing--40);
  }
}

/* ---------------------------------------------
 * M5.1 - TKIT Digital Entrance architecture
 * --------------------------------------------- */
.bg-tkit-landing {
  min-height: 100vh;
}

.bg-tkit-nav {
  border-bottom: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--soft-white);
  position: relative;
  z-index: 10;
}

.bg-tkit-hero,
.bg-tkit-intro,
.bg-tkit-experience,
.bg-tkit-photo-strip,
.bg-tkit-spmb {
  padding-inline: var(--wp--preset--spacing--40);
}

.bg-tkit-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: var(--wp--preset--spacing--70);
  align-items: center;
}

.bg-tkit-photo-placeholder {
  min-height: 420px;
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(40,26,113,0.04), rgba(241,164,0,0.08)),
    var(--wp--preset--color--soft-white);
  display: grid;
  place-items: center;
  padding: var(--wp--preset--spacing--50);
}

.bg-tkit-photo-placeholder--short {
  min-height: 260px;
}

.bg-tkit-story-grid,
.bg-tkit-photo-grid {
  margin-top: var(--wp--preset--spacing--60);
  gap: var(--wp--preset--spacing--50);
}

.bg-tkit-story-card {
  height: 100%;
  padding: var(--wp--preset--spacing--50);
}

.bg-tkit-footer {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-inline: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
  .bg-tkit-hero__grid {
    grid-template-columns: 1fr;
  }
  .bg-tkit-photo-placeholder {
    min-height: 320px;
  }
}

@media (max-width: 781px) {
  .bg-tkit-hero,
  .bg-tkit-intro,
  .bg-tkit-experience,
  .bg-tkit-photo-strip,
  .bg-tkit-spmb,
  .bg-tkit-footer {
    padding-inline: var(--wp--preset--spacing--40);
  }
  .bg-tkit-story-grid,
  .bg-tkit-photo-grid {
    gap: var(--wp--preset--spacing--40);
  }
  .bg-tkit-photo-placeholder {
    min-height: 260px;
  }
  .bg-tkit-photo-placeholder--short {
    min-height: 200px;
  }
}


/* ---------------------------------------------
 * M5.2 - TKIT real content & photography
 * --------------------------------------------- */
.bg-tkit-photo {
  margin: 0;
}

.bg-tkit-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.bg-tkit-photo--hero {
  min-height: 420px;
  height: clamp(420px, 42vw, 560px);
}

.bg-tkit-photo--hero img {
  object-position: center center;
}

.bg-tkit-photo--strip {
  min-height: 300px;
  height: clamp(300px, 30vw, 420px);
}

.bg-tkit-photo--strip img {
  object-position: center center;
}

@media (max-width: 900px) {
  .bg-tkit-photo--hero {
    min-height: 320px;
    height: 52vw;
    max-height: 440px;
  }
  .bg-tkit-photo--strip {
    min-height: 260px;
    height: 42vw;
    max-height: 360px;
  }
}

@media (max-width: 781px) {
  .bg-tkit-photo--hero {
    min-height: 280px;
    height: 68vw;
    max-height: 380px;
  }
  .bg-tkit-photo--strip {
    min-height: 240px;
    height: 64vw;
    max-height: 340px;
  }
}