/* ==========================================================================
   Mount Carmel School — "Welcome / Director's Desk" homepage section
   Recreates the approved reference design: intro+branding left, director
   portrait centre (gold diagonals), message panel right, navy wave footer.
   Scoped under .mcs-welcome / .mcs-wc-* — nothing else is affected.
   ========================================================================== */

@font-face {
  font-family: 'English Towne';
  src: url('../fonts/EnglishTowne.ttf') format('truetype');
  font-display: swap;
}

/* Neutralise legacy #welcome rules from style.css / responsive.css */
#welcome { padding: 0 !important; background: none !important; }

.mcs-welcome {
  --wc-navy: #2e3192;
  --wc-navy-deep: #232a8f;
  --wc-gold: #f5c408;
  --wc-gold-deep: #dfa32a;
  --wc-red: #b5121b;
  --wc-green: #157a3c;
  --wc-green-dark: #0f6330;
  --wc-cream: #fdf6d8;
  --wc-cream-ink: #7a5c14;
  --wc-panel: #f7f8fc;
  --wc-ink: #2b2f55;
  position: relative;
  padding: clamp(48px, 7vw, 90px) 0 clamp(85px, 10vw, 135px);
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fd 100%);
  overflow: hidden;
}
.mcs-welcome *, .mcs-welcome *::before, .mcs-welcome *::after { box-sizing: border-box; }

.mcs-wc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .78fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 50px);
}

/* ============================== LEFT ============================== */
.mcs-wc-left {
  padding: 14px clamp(24px, 3vw, 56px) 14px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mcs-wc-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #3a3f63;
}
.mcs-wc-brand {
  display: block;
  width: 100%;
  margin-top: 14px;
}
.mcs-wc-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.mcs-wc-tag {
  display: inline-block;
  margin: 18px 0 0;
  padding: 9px 24px;
  border-radius: 999px;
  background: var(--wc-cream);
  color: var(--wc-cream-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 15.5px;
}
.mcs-wc-text {
  margin: 20px 0 26px;
  color: var(--wc-ink);
  font-size: 15.5px;
  line-height: 1.75;
  text-align: justify;
}
.mcs-wc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--wc-green);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(21, 122, 60, .25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.mcs-wc-btn .arrow { font-size: 16px; transition: transform .25s ease; }
.mcs-wc-btn:hover {
  background: var(--wc-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(21, 122, 60, .32);
  color: #fff;
}
.mcs-wc-btn:hover .arrow { transform: translateX(4px); }

/* ========================= CENTRE PORTRAIT ========================= */
.mcs-wc-photo { position: relative; min-height: 420px; }
.mcs-wc-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: #c9b48a;
}
.mcs-wc-photo::before,
.mcs-wc-photo::after {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  width: 11px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--wc-gold) 0%, var(--wc-gold-deep) 100%);
  transform: skewX(-5deg);
  z-index: 2;
}
.mcs-wc-photo::before { left: -8px; }
.mcs-wc-photo::after { right: -8px; }

/* Decorative blue-gold wave finishing the bottom of the portrait.
   Displayed as a thin band: cropped from the wide source via
   object-fit, with a soft mask so it melts into the photo naturally. */
.mcs-wc-photo .mcs-wc-photo-wave {
  display: none;
}

/* ============================== RIGHT ============================== */
.mcs-wc-right {
  background: var(--wc-panel);
  padding: clamp(28px, 3.4vw, 52px) clamp(22px, 3vw, 50px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.mcs-wc-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 96px;
  line-height: .62;
  color: var(--wc-navy);
  user-select: none;
}
.mcs-wc-right h2 {
  margin: 16px 0 0;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  color: #20244a;
  line-height: 1.2;
}
.mcs-wc-rule {
  width: 130px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--wc-gold), rgba(245, 196, 8, 0));
  margin: 16px 0 20px;
}
.mcs-wc-msg {
  margin: 0;
  color: var(--wc-ink);
  font-size: 15.5px;
  line-height: 1.8;
  text-align: justify;
}
.mcs-wc-ribbon {
  margin-top: auto;
  padding: 20px 46px;
  background: var(--wc-navy);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  text-align: center;
}
.mcs-wc-ribbon em {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
  color: #fff;
}

/* ============================ WAVE FOOTER ============================ */
.mcs-wc-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(42px, 6vw, 84px);
  display: block;
  pointer-events: none;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) {
  .mcs-wc-grid { grid-template-columns: minmax(0, .95fr) minmax(0, .72fr) minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
  .mcs-wc-grid { grid-template-columns: 1fr; }
  .mcs-wc-left { padding-right: 0; }
  /* Aspect-ratio matches MCS-director.png (350x490) exactly, so the
     container always scales with the full photo — no cropping on mobile. */
  .mcs-wc-photo {
    min-height: 0;
    max-width: 460px;
    width: 100%;
    margin: 28px auto 0;
    aspect-ratio: 350 / 490;
  }
  .mcs-wc-right { margin-top: 28px; }
  .mcs-wc-ribbon { margin-top: 28px; }
}

@media (max-width: 575.98px) {
  .mcs-wc-quote { font-size: 72px; }
  .mcs-wc-text, .mcs-wc-msg { text-align: left; } /* justified text breaks on narrow phones */
  .mcs-wc-ribbon {
    padding: 16px 26px;
    clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
  }
}

/* ========================== ACCESSIBILITY ========================== */
.mcs-welcome a:focus-visible {
  outline: 2px solid var(--wc-navy);
  outline-offset: 3px;
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .mcs-welcome * { transition: none !important; animation: none !important; }
}