/* ════════════════════════════════════════════════════════════
   BRANCHES.CSS — Branches Page
   Requires: variables.css, common.css loaded first.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   HERO — Navy bg + watermark badge + chips + CTA
   ════════════════════════════════════════════════════════════ */
#branches-hero {
  position:   relative;
  background: var(--navy);
  padding:    140px 64px 90px;
  overflow:   hidden;
  isolation:  isolate;
  text-align: center;
}

#branches-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../images/inner-page-bg.png') center / contain no-repeat;
  opacity:    0.08;
  z-index:    -1;
}

.bh-content {
  max-width: 920px;
  margin:    0 auto;
  z-index: 1;
  position: inherit;
}

#branches-hero .section-label {
  justify-content: center;
}

.bh-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight:    900;
  line-height:    1.1;
  color:          var(--white);
  margin:         14px 0 16px;
  letter-spacing: -0.01em;
}

.bh-tagline {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   18px;
  color:       var(--sun);
  margin:      0 0 16px;
}

.bh-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  font-weight: 400;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  max-width:   720px;
  margin:      0 auto 28px;
}

/* Branch chip row */
.bh-chips {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             10px;
  margin-bottom:   30px;
}

.bh-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      rgba(255, 255, 255, 0.08);
  border:          1px solid rgba(255, 255, 255, 0.2);
  color:           rgba(255, 255, 255, 0.85);
  font-family:     'Inter', sans-serif;
  font-weight:     600;
  font-size:       13px;
  padding:         8px 18px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.25s var(--ease-bounce);
}
.bh-chip::before {
  content:    '';
  width:      6px;
  height:     6px;
  background: var(--sun);
  border-radius: 50%;
  display:    inline-block;
}
.bh-chip:hover {
  background: var(--sun);
  color:      var(--navy);
  border-color: var(--sun);
  transform:  translateY(-2px);
}
.bh-chip:hover::before { background: var(--navy); }

.bh-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       14px;
  padding:         14px 30px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
}
.bh-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}


/* ════════════════════════════════════════════════════════════
   FEATURES — "Consistent Quality at Every Location"
   6 small tiles in a 6-column row
   ════════════════════════════════════════════════════════════ */
#branches-features {
  background: var(--white);
  padding:    90px 64px 100px;
}

.bf-head {
  text-align:    center;
  margin-bottom: 50px;
}

.bf-head .section-label {
  justify-content: center;
}

.bf-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--navy);
  margin:         10px 0 14px;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

.bf-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  line-height: 1.7;
  color:       var(--text-soft);
  max-width:   620px;
  margin:      0 auto;
}

.bf-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   18px;
  max-width:             1240px;
  margin:                0 auto;
}

.bf-tile {
  background:    var(--white);
  border:        1px solid #E8ECF3;
  border-radius: 14px;
  padding:       24px 16px 20px;
  text-align:    center;
  transition:    transform 0.35s var(--ease-out),
                 box-shadow 0.35s var(--ease-out),
                 border-color 0.35s ease;
}
.bf-tile:hover {
  border-color: var(--sun);
  transform:    translateY(-6px);
  box-shadow:   0 16px 36px rgba(15, 27, 61, 0.08);
}

.bf-icon {
  width:           54px;
  height:          54px;
  border-radius:   50%;
  background:      var(--cream);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 12px;
  font-size:       22px;
}

.bf-tile h3 {
  font-family: 'Inter', sans-serif;
  font-size:   13px;
  font-weight: 800;
  color:       var(--navy);
  margin:      0;
  line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════
   DETAIL SECTIONS — 4 zigzag branch blocks
   ════════════════════════════════════════════════════════════ */
.branch-detail {
  padding: 90px 64px;
}

.branch-detail--white { background: var(--white); }
.branch-detail--light { background: #F4F6FB; }
.branch-detail--navy  { background: var(--navy); }

.bd-container {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:   "image content";
  gap:                   72px;
  max-width:             1240px;
  margin:                0 auto;
  align-items:           center;
}

.bd-image-col   { grid-area: image; }
.bd-content-col { grid-area: content; }

.branch-detail--content-left .bd-container {
  grid-template-areas: "content image";
}


/* ── Image with overlapping accent thumbnail ── */
.bd-image {
  position:      relative;
  border-radius: 18px;
  overflow:      hidden;
  border:        4px solid var(--sun);
  box-shadow:    0 25px 60px rgba(15, 27, 61, 0.2);
}
.bd-image img {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
}

.bd-image-thumb {
  position:      absolute;
  right:         -18px;
  bottom:        -22px;
  width:         140px;
  height:        100px;
  border-radius: 12px;
  overflow:      hidden;
  border:        4px solid var(--sun);
  box-shadow:    0 14px 30px rgba(15, 27, 61, 0.25);
  background:    var(--white);
}
.bd-image-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Faint branch number watermark */
.bd-image-col {
  position: relative;
}
.bd-bignum {
  position:        absolute;
  top:             -16px;
  right:           24px;
  font-family:     var(--font-display);
  font-size:       3rem;
  font-weight:     900;
  color:           rgba(15, 27, 61, 0.08);
  letter-spacing:  -0.02em;
  line-height:     1;
  z-index:         0;
  pointer-events:  none;
}
.branch-detail--navy .bd-bignum { color: rgba(255, 255, 255, 0.08); }


/* ── Content column ── */
.bd-content-col {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.branch-detail .section-label {
  margin-bottom: 0;
}

.bd-location {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size:   12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:       var(--coral);
  margin:      0;
}
.bd-location::before { content: '📍'; font-size: 14px; }

.bd-title {
  font-family:    var(--font-display);
  font-size:      clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight:    900;
  line-height:    1.1;
  margin:         4px 0 8px;
  letter-spacing: -0.01em;
}

.bd-body {
  font-family: 'Inter', sans-serif;
  font-size:   14.5px;
  font-weight: 400;
  line-height: 1.75;
  margin:      0;
}

.bd-list {
  list-style:            none;
  padding:               0;
  margin:                14px 0 6px;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px 18px;
}

.bd-list li {
  font-family:  'Inter', sans-serif;
  font-size:    13.5px;
  font-weight:  500;
  line-height:  1.45;
  padding-left: 20px;
  position:     relative;
}
.bd-list li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           7px;
  width:         7px;
  height:        7px;
  background:    var(--coral);
  border-radius: 50%;
}

.bd-cta {
  align-self:      flex-start;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      var(--navy);
  color:           var(--sun);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       13px;
  padding:         12px 26px;
  border-radius:   50px;
  text-decoration: none;
  margin-top:      8px;
  transition:      all 0.3s var(--ease-bounce);
}
.bd-cta:hover {
  background: var(--sun);
  color:      var(--navy);
  transform:  translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 27, 61, 0.15);
}


/* ── Theme overrides by background variant ── */
.branch-detail--white .bd-title,
.branch-detail--light .bd-title { color: var(--navy); }
.branch-detail--navy  .bd-title { color: var(--white); }

.branch-detail--white .bd-body,
.branch-detail--light .bd-body { color: var(--text-soft); }
.branch-detail--navy  .bd-body { color: rgba(255, 255, 255, 0.72); }

.branch-detail--white .bd-list li,
.branch-detail--light .bd-list li { color: var(--text-soft); }
.branch-detail--navy  .bd-list li { color: rgba(255, 255, 255, 0.78); }

/* On navy bg the section-label colour should be sun-yellow, not coral */
.branch-detail--navy .section-label,
.branch-detail--navy .bd-location {
  color: var(--sun);
}
.branch-detail--navy .section-label::before,
.branch-detail--navy .section-label::after {
  background: var(--sun);
}

/* On navy, swap the CTA inversion so it stays visible */
.branch-detail--navy .bd-cta {
  background: var(--sun);
  color:      var(--navy);
}
.branch-detail--navy .bd-cta:hover {
  background: var(--white);
}


/* ════════════════════════════════════════════════════════════
   AT A GLANCE — 4 small cards + map placeholder
   ════════════════════════════════════════════════════════════ */
#branches-glance {
  background: #F4F6FB;
  padding:    90px 64px 100px;
}

.bg-head {
  text-align:    center;
  margin-bottom: 50px;
}

.bg-head .section-label {
  justify-content: center;
  color:           var(--navy);
}
.bg-head .section-label::before,
.bg-head .section-label::after {
  background: var(--navy);
}

.bg-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--navy);
  margin:         10px 0 0;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

.bg-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   22px;
  max-width:             1180px;
  margin:                0 auto 42px;
}

.bg-card {
  background:    var(--white);
  border-radius: 16px;
  padding:       28px 22px 24px;
  text-align:    center;
  box-shadow:    0 10px 28px rgba(15, 27, 61, 0.06);
  transition:    transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.bg-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 27, 61, 0.12);
}

.bg-card-icon {
  width:           58px;
  height:          58px;
  border-radius:   50%;
  background:      var(--cream);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 14px;
  font-size:       22px;
}

.bg-card h3 {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 900;
  color:       var(--navy);
  margin:      0 0 6px;
  line-height: 1.2;
}

.bg-card p {
  font-family: 'Inter', sans-serif;
  font-size:   12.5px;
  line-height: 1.5;
  color:       var(--text-soft);
  margin:      0 0 14px;
}

.bg-card-badge {
  display:        inline-block;
  background:     var(--navy);
  color:          var(--sun);
  font-family:    'Inter', sans-serif;
  font-weight:    800;
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        5px 14px;
  border-radius:  50px;
}


/* Map placeholder */
.bg-map {
  position:      relative;
  background:    #E9ECF3;
  border-radius: 22px;
  padding:       60px 40px;
  min-height:    260px;
  max-width:     1180px;
  margin:        0 auto;
  text-align:    center;
  overflow:      hidden;
}

.bg-map-center { position: relative; z-index: 1; }

.bg-map-icon { font-size: 32px; margin-bottom: 8px; }

.bg-map h3 {
  font-family: var(--font-display);
  font-size:   1.4rem;
  font-weight: 900;
  color:       var(--navy);
  margin:      0 0 6px;
}

.bg-map p {
  font-family: 'Inter', sans-serif;
  font-size:   13.5px;
  color:       var(--text-soft);
  margin:      0;
}

.bg-pin {
  position:        absolute;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  z-index:         2;
}
.bg-pin span {
  background:    var(--navy);
  color:         var(--sun);
  font-family:   'Inter', sans-serif;
  font-size:     11px;
  font-weight:   700;
  padding:       4px 10px;
  border-radius: 50px;
  white-space:   nowrap;
  margin-top:    4px;
}
.bg-pin::before {
  content:      '📍';
  font-size:    20px;
  filter:       drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
.bg-pin--1 { top: 30%; left: 18%; }
.bg-pin--2 { top: 50%; left: 45%; }
.bg-pin--3 { top: 65%; left: 32%; }
.bg-pin--4 { top: 32%; right: 18%; }


/* ════════════════════════════════════════════════════════════
   ENROLL TODAY — Navy section before footer
   ════════════════════════════════════════════════════════════ */
#branches-enroll {
  background: var(--navy);
  padding:    90px 64px 100px;
}

.be-grid {
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   64px;
  max-width:             1180px;
  margin:                0 auto;
  align-items:           center;
}


/* Collage on left: 1 big top + 2 small bottom */
.be-collage          { display: flex; flex-direction: column; gap: 12px; }
.be-collage-main     {
  border-radius: 14px;
  overflow:      hidden;
  aspect-ratio:  4 / 3;
}
.be-collage-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.be-collage-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.be-collage-row > div {
  border-radius: 14px;
  overflow:      hidden;
  aspect-ratio:  4 / 3;
}
.be-collage-row img  { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Content right */
.be-content .section-label {
  color: var(--sun);
}
.be-content .section-label::before,
.be-content .section-label::after {
  background: var(--sun);
}

.be-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--white);
  line-height:    1.1;
  margin:         14px 0 16px;
  letter-spacing: -0.01em;
}

.be-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  max-width:   500px;
  margin:      0 0 26px;
}

.be-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       14px;
  padding:         14px 30px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
}
.be-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #branches-hero      { padding: 130px 32px 70px; }

  #branches-features  { padding: 70px 32px 80px; }
  .bf-grid            { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .branch-detail      { padding: 70px 32px; }
  .bd-container,
  .branch-detail--content-left .bd-container {
    display:        flex;
    flex-direction: column;
    gap:            32px;
  }
  .bd-list            { grid-template-columns: 1fr; }

  #branches-glance    { padding: 70px 32px 80px; }
  .bg-grid            { grid-template-columns: repeat(2, 1fr); }
  .bg-map             { padding: 50px 30px; }
  .bg-pin             { display: none; }

  #branches-enroll    { padding: 80px 32px; }
  .be-grid            { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  #branches-hero      { padding: 110px 24px 60px; }
  .bh-tagline         { font-size: 16px; }

  #branches-features  { padding: 60px 18px 70px; }
  .bf-grid            { grid-template-columns: repeat(2, 1fr); max-width: 480px; margin: 0 auto; }

  .branch-detail      { padding: 60px 24px; }
  .bd-image-thumb     { width: 100px; height: 76px; right: -10px; bottom: -16px; }
  .bd-bignum          { font-size: 2.2rem; right: 12px; }

  #branches-glance    { padding: 60px 18px 70px; }
  .bg-grid            { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto 38px; }

  #branches-enroll    { padding: 70px 24px 80px; }
}