/* =========================================================
   PASHUPATI SECONDARY SCHOOL — CONTACT PAGE
   ---------------------------------------------------------
   Purpose : Contact information, map and direct actions
   Version : 1.0.0
========================================================= */

/* =========================================================
   01. PAGE HEADING
========================================================= */

.contact-page-section{
  padding:52px 0 34px;
}

.contact-page-heading{
  max-width:760px;
  margin-bottom:24px;
}

.contact-page-heading h2{
  color:#183b68;
  font-size:clamp(1.4rem,2.1vw,1.85rem);
  line-height:1.4;
  font-weight:800;
}

.contact-page-heading p{
  margin-top:7px;
  color:var(--muted);
  font-size:.92rem;
}

.contact-hero-icon{
  font-size:1.5rem;
}

/* =========================================================
   02. CONTACT INFORMATION CARDS
========================================================= */

.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.contact-info-card{
  min-width:0;
  padding:24px 21px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}

.contact-info-card:hover{
  transform:translateY(-4px);
  border-color:#c8d8eb;
  box-shadow:var(--shadow-hover);
}

.contact-info-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  border-radius:13px;
  box-shadow:0 8px 18px rgba(30,77,143,.18);
  font-size:1.08rem;
}

.contact-info-card h3{
  color:#183b68;
  font-size:1rem;
  line-height:1.4;
  font-weight:800;
}

.contact-info-card p,
.contact-info-card strong,
.contact-info-card > a{
  display:block;
  margin-top:7px;
  color:#627388;
  font-size:.84rem;
  line-height:1.65;
}

.contact-info-card strong{
  color:#40536c;
  font-weight:700;
}

.contact-info-card > a:hover{
  color:var(--brand);
}

.contact-email-link{
  overflow-wrap:anywhere;
}

.contact-small-link{
  width:max-content;
  max-width:100%;
  color:var(--brand) !important;
  font-weight:750;
}

/* =========================================================
   03. MAP AND DIRECTIONS
========================================================= */

.contact-map-section{
  padding:20px 0 54px;
}

.contact-map-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  gap:22px;
  align-items:stretch;
}

.contact-map-card,
.contact-reach-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.contact-map-card{
  min-height:480px;
}

.contact-map-card iframe{
  width:100%;
  height:100%;
  min-height:480px;
  display:block;
  border:0;
}

.contact-reach-card{
  padding:30px;
}

.contact-reach-card h2{
  color:#183b68;
  font-size:clamp(1.3rem,2vw,1.7rem);
  line-height:1.4;
  font-weight:800;
}

.contact-reach-card > p{
  margin-top:12px;
  color:#637389;
  font-size:.9rem;
  line-height:1.8;
}

.contact-reach-list{
  list-style:none;
  display:grid;
  gap:11px;
  margin-top:22px;
}

.contact-reach-list li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:11px 12px;
  color:#50637a;
  background:#f6f9fc;
  border:1px solid #e1e9f2;
  border-radius:10px;
  font-size:.84rem;
  font-weight:600;
}

.contact-reach-list i{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:9px;
}

.contact-action-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}

.contact-primary-button,
.contact-secondary-button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:9px;
  font-size:.82rem;
  font-weight:750;
  transition:transform var(--transition),background var(--transition),color var(--transition);
}

.contact-primary-button{
  color:#fff;
  background:var(--brand);
}

.contact-secondary-button{
  color:var(--brand);
  background:#fff;
  border:1px solid #cedced;
}

.contact-primary-button:hover,
.contact-secondary-button:hover{
  transform:translateY(-2px);
}

.contact-primary-button:hover{
  background:var(--brand-dark);
}

.contact-secondary-button:hover{
  color:#fff;
  background:var(--brand);
}

/* =========================================================
   04. DIRECT CONTACT CTA
========================================================= */

.contact-direct-section{
  padding:0 0 64px;
}

.contact-direct-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:30px 32px;
  color:#fff;
  background:linear-gradient(120deg,var(--brand-dark),var(--brand));
  border-radius:var(--radius);
  box-shadow:0 16px 36px rgba(22,50,86,.18);
}

.contact-direct-card .eyebrow{
  color:#d9e8fb;
}

.contact-direct-card h2{
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.4;
}

.contact-direct-card p{
  margin-top:7px;
  color:rgba(255,255,255,.82);
  font-size:.9rem;
}

.contact-direct-actions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

.contact-direct-actions a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 15px;
  color:var(--brand-dark);
  background:#fff;
  border-radius:9px;
  font-size:.84rem;
  font-weight:750;
  transition:transform var(--transition),background var(--transition);
}

.contact-direct-actions a:last-child{
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.35);
}

.contact-direct-actions a:hover{
  transform:translateY(-2px);
}

.contact-direct-actions a:last-child:hover{
  background:rgba(255,255,255,.18);
}

/* =========================================================
   05. RESPONSIVE CONTACT PAGE
========================================================= */

@media(max-width:1100px){
  .contact-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .contact-map-grid{
    grid-template-columns:1fr;
  }

  .contact-map-card,
  .contact-map-card iframe{
    min-height:420px;
  }
}

@media(max-width:760px){
  .contact-page-section{
    padding-top:38px;
  }

  .contact-direct-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .contact-direct-actions{
    width:100%;
  }

  .contact-direct-actions a{
    flex:1;
  }
}

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

  .contact-map-card,
  .contact-map-card iframe{
    min-height:340px;
  }

  .contact-reach-card{
    padding:23px 20px;
  }

  .contact-action-row,
  .contact-direct-actions{
    flex-direction:column;
  }

  .contact-primary-button,
  .contact-secondary-button,
  .contact-direct-actions a{
    width:100%;
  }

  .contact-direct-card{
    padding:25px 21px;
  }
}