/* =========================================================
   T-FIBER SUBPAGES — stylesheet
   Covers: About T-Fiber, Contact Us, Board of Directors.
   Entirely new classes (prefixed .subpage-) — nothing here
   overrides or depends on style.css/hero.css/tariff.css rules,
   so existing pages are completely unaffected. Reuses existing
   design tokens only (--navy, --orange, --grey-line, --font-head,
   --font-body, .btn, .container) already defined in style.css.
   ========================================================= */

/* =================== SHARED: SUBPAGE HERO BANNER =================== */
.subpage-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(100deg, rgba(8,14,30,.72) 0%, rgba(8,14,30,.35) 55%, rgba(8,14,30,.15) 100%),
    url('../images/bg_what_we_offer.png');
  background-size:cover;
  background-position:center;
  padding:46px 0 40px;
  color:var(--white);
}
.subpage-hero-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.subpage-hero-text{ flex:1; min-width:260px; }
.subpage-hero-text h1{
  font-family:var(--font-head); font-size:1.8rem; font-weight:800; margin:0 0 10px;
  text-transform:uppercase; letter-spacing:.3px;
}
.subpage-hero-text p{
  color:#D7E2ED; max-width:560px; margin:0 0 14px; line-height:1.6; font-size:.95rem;
}
.subpage-breadcrumb{
  display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600;
}
.subpage-breadcrumb a{ color:var(--orange); }
.subpage-breadcrumb a:hover{ text-decoration:underline; }
.subpage-breadcrumb span.sep{ color:rgba(255,255,255,.4); }
.subpage-breadcrumb span.current{ color:#fff; }

/* CM / Minister badges, right side of the banner */
.subpage-hero-leaders{
  display:flex; gap:16px; flex-wrap:wrap;
}
.subpage-leader{
  display:flex; align-items:center;
  background:rgba(10,20,45,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50px; padding:6px 22px 6px 6px;
}
.subpage-leader-photo{
  width:75px; height: 75px; border-radius:50%; border:2px solid var(--orange);
  object-fit:cover; flex-shrink:0; margin-right:14px;
}
.subpage-leader-info strong{
  display:block; font-family:var(--font-head); font-size:.85rem; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:.3px;
}
.subpage-leader-info span{
  display:block; font-size:.78rem; color:#D7E2ED; line-height:1.4; margin-top:2px;
}

@media (max-width:900px){
  .subpage-hero-inner{ flex-direction:column; align-items:flex-start; }
  .subpage-hero-leaders{ width:100%; }
}
@media (max-width:640px){
  .subpage-hero-text h1{ font-size:1.5rem; }
  .subpage-leader{ padding:5px 16px 5px 5px; }
  .subpage-leader-photo{ width:50px; height:50px; margin-right:10px; }
  .subpage-leader-info strong{ font-size:.74rem; }
  .subpage-leader-info span{ font-size:.7rem; }
}

/* =================== ABOUT T-FIBER PAGE =================== */
.about-page-body{ padding:30px 0 25px; background:var(--white); }
.about-page-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: center;
}
.about-page-text p{
  color:var(--text); font-size:0.9rem; line-height:1.85; text-align:justify; margin:0 0 22px;
}
.about-page-text p:last-child{ margin-bottom:0; }

/* Decorative ring graphic reusing the site's district-map.svg */
.about-graphic{
  position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto;
}
.about-graphic-ring{
  position:absolute; inset:0; border-radius:50%;
  background:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(247,148,29,.35);
}
.about-graphic-ring::before{
  content:""; position:absolute; inset:14px; border-radius:50%; background:var(--white);
}
.about-graphic-map{
  position:absolute; inset:36px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.about-graphic-map img{ width:78%; height:auto; }
.about-graphic-badge{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--navy); color:var(--white);
  box-shadow:0 10px 24px rgba(0,29,87,.35); border:4px solid var(--white);
}
.about-graphic-badge i{ font-size:1.3rem; }
.about-graphic-badge.badge-1{ width:88px; height:88px; top:-14px; right:6%; background:linear-gradient(135deg,#1E88E5,#0d2a52); }
.about-graphic-badge.badge-2{ width:64px; height:64px; bottom:6%; left:-18px; background:linear-gradient(135deg,#2DD4BF,#0d2a52); }
.about-graphic-badge.badge-3{ width:52px; height:52px; bottom:-10px; right:18%; background:linear-gradient(135deg,var(--orange),#b35e0e); }

.about-page-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px;
  padding-top:36px; border-top:1px solid var(--grey-line);
}
.about-page-stat{ text-align:center; }
.about-page-stat strong{
  display:block; font-family:var(--font-head); color:var(--navy); font-size:1.6rem; font-weight:800;
}
.about-page-stat span{ display:block; font-size:.76rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.3px; margin-top:4px; }

@media (max-width:980px){
  .about-page-grid{ grid-template-columns:1fr; }
  .about-graphic{ order:-1; max-width:320px; }
}
@media (max-width:640px){
  .about-page-stats{ grid-template-columns:1fr 1fr; }
}

/* =================== CONTACT US PAGE =================== */
.contact-page-body{ padding:70px 0 90px; background:var(--grey-bg); }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:start; }

.contact-info-card{
  background:var(--white); border:1px solid var(--grey-line); border-radius:14px;
  padding:32px 28px; box-shadow:0 10px 26px rgba(11,42,74,.06);
}
.contact-info-card h2{
  font-family:var(--font-head); color:var(--navy); font-size:1.3rem; margin:0 0 22px;
}
.contact-info-item{ display:flex; gap:16px; margin-bottom:22px; }
.contact-info-item:last-child{ margin-bottom:0; }
.contact-info-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:10px; background:var(--grey-bg);
  color:var(--orange); display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.contact-info-text strong{ display:block; color:var(--navy); font-size:.92rem; margin-bottom:3px; }
.contact-info-text span, .contact-info-text a{ display:block; color:var(--text-light); font-size:.86rem; line-height:1.55; }
.contact-info-text a:hover{ color:var(--orange); }
.copied-feedback{ color:var(--green) !important; font-weight:700; }

.contact-social{ display:flex; gap:10px; margin-top:26px; padding-top:22px; border-top:1px solid var(--grey-line); }
.contact-social a{
  width:38px; height:38px; border-radius:50%; background:var(--grey-bg); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  transition:background .2s ease, color .2s ease;
}
.contact-social a:hover{ background:var(--orange); color:var(--white); }

.contact-map-wrap{
  border-radius:14px; overflow:hidden; border:1px solid var(--grey-line);
  box-shadow:0 10px 26px rgba(11,42,74,.06);
  background:var(--white);
}
.contact-map-wrap iframe{ width:100%; height:100%; min-height:460px; border:0; display:block; }
.contact-map-caption{
  padding:16px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.contact-map-caption span{ font-size:.85rem; color:var(--text-light); }
.contact-map-caption a{ font-size:.85rem; font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:6px; }

@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* =================== BOARD OF DIRECTORS PAGE =================== */
.board-page-body{ padding:20px 0 90px; background:var(--white); }
.board-page-intro{ max-width:80%; margin:0 auto 50px; text-align:center; color:var(--tf-blue); font-size:1rem; line-height:1.7; }

.board-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; }
.board-card{
  position:relative;
  background:var(--white); border:1px solid var(--grey-line); border-radius:16px;
  padding:0 0 24px; text-align:center; overflow:hidden;
  box-shadow:0 8px 20px rgba(11,42,74,.06);
  transition:transform .3s ease, box-shadow .3s ease;
  opacity:0; transform:translateY(16px);
}
.board-card.board-card-in{ animation:boardCardIn .55s ease forwards; }
@keyframes boardCardIn{ to{ opacity:1; transform:translateY(0); } }
.board-card:hover{ transform:translateY(-8px); box-shadow:0 20px 36px rgba(11,42,74,.14); }

.board-card-top{
  position:relative; height:76px;
  background:linear-gradient(120deg, var(--navy) 0%, #123a5e 100%);
}
.board-card:nth-child(4n+2) .board-card-top{ background:linear-gradient(120deg, #7B4FA0 0%, #4a2d63 100%); }
.board-card:nth-child(4n+3) .board-card-top{ background:linear-gradient(120deg, #16A0A0 0%, #0d5f5f 100%); }
.board-card:nth-child(4n+4) .board-card-top{ background:linear-gradient(120deg, var(--orange) 0%, #b35e0e 100%); }

.board-card-photo{
  width:150px; height:150px; border-radius:50%; object-fit:cover;
  border:5px solid var(--white); box-shadow:0 6px 18px rgba(0,0,0,.15);
  margin:-52px auto 16px; display:block; position:relative; z-index:2;
}
.board-card h3{ font-family:var(--font-head); color:var(--navy); font-size:1.02rem; margin:0 0 4px; padding:0 16px; }
.board-card .board-title{ display:block; color:#f36f21; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
.board-card .board-desig{ display:block; color:var(--text-light); font-size:.82rem; padding:0 20px; line-height:1.5; }

.board-card-icon{
  position:absolute; top:14px; right:14px; z-index:2;
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.78rem;
}

@media (prefers-reduced-motion: reduce){
  .board-card{ animation:none !important; opacity:1; transform:none; }
}
@media (max-width:1180px){
  .board-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px){
  .board-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .board-grid{ grid-template-columns:1fr; }
}

/* =================== LATEST EVENTS PAGE =================== */
.events-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; }
.event-card{
  background:var(--white); border:1px solid var(--grey-line); border-radius:14px;
  overflow:hidden; box-shadow:0 8px 20px rgba(11,42,74,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.event-card:hover{ transform:translateY(-6px); box-shadow:0 18px 32px rgba(11,42,74,.12); }
.event-card-image{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--grey-bg);
}
.event-card-image img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.event-card:hover .event-card-image img{ transform:scale(1.05); }
.event-card-body{ padding:20px 22px 24px; }
.event-date{
  display:inline-block; font-size:.72rem; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px;
}
.event-card-body h3{ font-family:var(--font-head); color:var(--navy); font-size:1.05rem; margin:0 0 10px; }
.event-card-body p{ font-size:.86rem; color:var(--text-light); line-height:1.65; margin:0; }

@media (prefers-reduced-motion: reduce){
  .event-card, .event-card-image img{ transition:none; }
  .event-card:hover{ transform:none; }
  .event-card:hover .event-card-image img{ transform:none; }
}
@media (max-width:768px){
  .events-grid{ grid-template-columns:1fr; }
}

/* =================== SERVICE PAGES (key benefit points) =================== */
.service-features-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:30px 0 10px; }
.service-feature-card{
  display:flex; gap:14px; padding:18px 20px; background:var(--grey-bg);
  border-radius:10px; border:1px solid var(--grey-line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-feature-card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(11,42,74,.08); }
.service-feature-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.service-feature-text{ font-size:.88rem; color:var(--text); line-height:1.5; }
.service-tagline{
  display:block; font-size:1.05rem; color:var(--orange); font-weight:600; margin:0 0 16px;
}
.service-related{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.service-related a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:24px;
  background:var(--white); border:1px solid var(--grey-line); color:var(--navy); font-size:.85rem; font-weight:600;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.service-related a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* =================== DISTRICT MANAGER DIRECTORY (Contact page) =================== */
.district-table-wrap{
  overflow-x:auto; border:1px solid var(--grey-line); border-radius:10px;
  box-shadow:0 6px 18px rgba(11,42,74,.05);
}
.district-table{ width:100%; border-collapse:collapse; min-width:760px; }
.district-table thead th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  color:#fff; background:var(--navy); padding:14px 18px; white-space:nowrap;
}
.district-table tbody td{
  padding:13px 18px; border-bottom:1px solid var(--grey-line); font-size:.87rem;
  color:var(--text); vertical-align:middle;
}
.district-table tbody td:first-child{ font-weight:700; color:var(--navy); white-space:nowrap; }
.district-table tbody tr:nth-child(even){ background:var(--grey-bg); }
.district-table tbody tr:hover{ background:rgba(247,148,29,.07); }
.district-table td a{ color:var(--steel); white-space:nowrap; }
.district-table td a:hover{ color:var(--orange); text-decoration:underline; }
.district-table tbody tr[style*="display: none"]{ display:none; }

@media (max-width:640px){
  .district-table thead th, .district-table tbody td{ padding:10px 14px; font-size:.82rem; }
}

.district-search-wrap{ display:flex; justify-content:flex-end; margin-bottom:18px; }
.district-search-wrap .search-input-icon{ position:relative; width:100%; max-width:300px; }
.district-search-wrap .search-input-icon i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:.85rem;
}
.district-search-wrap input{
  width:100%; font-family:var(--font-body); font-size:.87rem; padding:10px 14px 10px 36px;
  border:1px solid var(--grey-line); border-radius:22px; transition:border-color .15s ease, box-shadow .15s ease;
}
.district-search-wrap input:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(247,148,29,.15);
}
@media (max-width:640px){
  .district-search-wrap{ justify-content:stretch; }
  .district-search-wrap .search-input-icon{ max-width:none; }
}

/* =================== GOs & MEMOS TABLE =================== */
.gos-table-wrap{
  overflow-x:auto; border:1px solid var(--grey-line); border-radius:10px;
  box-shadow:0 6px 18px rgba(11,42,74,.05);
}
.gos-table{ width:100%; border-collapse:collapse; min-width:920px; }
.gos-table thead th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  color:#fff; background:var(--navy); padding:14px 18px; white-space:nowrap;
}
.gos-table tbody td{
  padding:14px 18px; border-bottom:1px solid var(--grey-line); font-size:.87rem;
  color:var(--text); vertical-align:top; line-height:1.55;
}
.gos-table tbody tr:nth-child(even){ background:var(--grey-bg); }
.gos-table tbody tr:hover{ background:rgba(247,148,29,.07); }
.gos-table td.gos-abstract{ max-width:420px; }
.gos-doc-btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:16px;
  font-size:.78rem; font-weight:600; white-space:nowrap; margin-bottom:6px;
  border:1px solid var(--grey-line); color:var(--navy); background:var(--white);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.gos-doc-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.gos-empty-row td{ text-align:center; padding:40px; color:var(--text-light); }

.gos-filter-search{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.gos-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.gos-filter-chip{
  background:var(--white); border:1px solid var(--grey-line); color:var(--text-light);
  font-size:.78rem; font-weight:600; padding:7px 14px; border-radius:20px; cursor:pointer;
  transition:all .15s ease;
}
.gos-filter-chip:hover{ border-color:var(--orange); }
.gos-filter-chip.is-active{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.gos-results-count{ font-size:.8rem; color:var(--text-light); margin-bottom:14px; }

@media (max-width:640px){
  .gos-table thead th, .gos-table tbody td{ padding:10px 14px; font-size:.82rem; }
}

@media (max-width:768px){
  .service-features-grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   ADD THESE RULES TO css/subpages.css
   =========================================================================
   1. Replaces the old ring/badge styling for .about-graphic with a plain
      image slot -- delete any existing .about-graphic-ring,
      .about-graphic-map or .about-graphic-badge rules, they're no longer
      needed.
   2. Adds the new reusable .content-block text/image component used
      further down the About page (and any other subpage that needs
      alternating text/image sections).
   ========================================================================= */

/* ---- 1. Simplified about-graphic image ---- */
.about-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-graphic-img {
  width: 100%;
  height: auto;
  max-width: 480px;
  display: block;
  border-radius: 12px; /* remove if the image shouldn't have rounded corners */
}

/* ---- 2. Reusable text + image content block ---- */
.content-block {
  padding: 15px 0;
}
.content-block-section {
  padding: 15px 0;
}

.content-block-section .container > .content-block + .content-block {
  margin-top: 56px;
}

.content-block {
  display: flex;
  align-items: center;
  gap: 48px;
   font-size: 0.9rem;
}

/* Default: text first, image second (image on the right) */
.content-block-text {
  flex: 1 1 50%;
  min-width: 0;
  text-align: justify;
  font-size: 0.9rem;
}

.content-block-image {
  flex: 1 1 50%;
  min-width: 0;
}

.content-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.content-block-text h2 {
  margin-top: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--tf-blue, #1B3B7A);
}

.content-block-text p {
  margin: 0 0 16px;
  line-height: 1.7;
}

.content-block-text p:last-child {
  margin-bottom: 0;
}

/* Modifier: flip so the image sits on the left instead */
.content-block--image-left {
  flex-direction: row-reverse;
}

/* ---- Responsive: stack text/image on smaller screens ---- */
@media (max-width: 860px) {
  .content-block,
  .content-block--image-left {
    flex-direction: column;
    gap: 24px;
  }
}