/* =========================================================================
   Custom additions: News Ticker, Language Switcher, Key Persons full-width
   grid, Services grid refinements.
   Loaded after style.css, so rules here override where needed.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Language switcher (English / Marathi)
   ---------------------------------------------------------------------- */
.lang-switch{ display:flex; gap:4px; }
.lang-btn{
  background:transparent; border:1px solid #4a6f8f; color:#dce8f2;
  border-radius:3px; padding:2px 10px; cursor:pointer; font-size:.8rem; font-family:inherit;
}
.lang-btn:hover{ background:var(--saffron); border-color:var(--saffron); color:#fff; }
.lang-btn.is-active{ background:var(--saffron); border-color:var(--saffron); color:#fff; font-weight:600; }

/* Bilingual text pairs: only one language shows at a time. English by default. */
.lang-text.lang-mr{ display:none; }
html.lang-mr .lang-text.lang-en{ display:none; }
html.lang-mr .lang-text.lang-mr{ display:inline; }

/* Bilingual content blocks (e.g. Page body text) — same idea, block-level. */
.lang-block.lang-mr{ display:none; }
html.lang-mr .lang-block.lang-en{ display:none; }
html.lang-mr .lang-block.lang-mr{ display:block; }

/* -------------------------------------------------------------------------
   2. News ticker
   ---------------------------------------------------------------------- */
.news-ticker{
  display:flex; align-items:stretch; background:#fdf0d6; border-bottom:1px solid var(--border);
  overflow:hidden;
}
.news-ticker__label{
  flex:0 0 auto; background:var(--saffron); color:#fff; font-weight:700; font-size:.85rem;
  padding:8px 18px; display:flex; align-items:center; white-space:nowrap;
}
.news-ticker__viewport{ flex:1 1 auto; overflow:hidden; position:relative; }
.news-ticker__track{
  display:flex; gap:60px; white-space:nowrap; padding:8px 20px;
  animation:gdc-ticker-scroll 30s linear infinite;
}
.news-ticker__viewport:hover .news-ticker__track{ animation-play-state:paused; }
.news-ticker__track li{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; color:var(--text); }
.news-ticker__track a{ color:var(--navy); font-weight:600; }
.news-ticker__icon{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }

@keyframes gdc-ticker-scroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

@media (max-width:640px){
  .news-ticker__label{ padding:8px 12px; font-size:.75rem; }
  .news-ticker__track li{ font-size:.8rem; }
}

/* -------------------------------------------------------------------------
   3. Key Persons — full width, single inline row on desktop, square photos
   ---------------------------------------------------------------------- */

/* Desktop: always one horizontal row — never wraps, never scrolls. Cards
   grow to fill the full row width at a comfortable size; if there are
   enough people that they don't all fit at that size, they shrink
   together gently (down to a sensible floor) so everyone still fits on
   one line without looking cramped or triggering a scrollbar. */
@media (min-width:961px){
  .key-persons.key-persons--full{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
  }
  .key-persons--full .key-persons__card{
    flex:1 1 150px;
    min-width:100px;
    max-width:190px;
  }
}

/* Tablet / mobile: wraps into a responsive grid instead of forcing a scroll. */
@media (max-width:960px){
  .key-persons.key-persons--full{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:14px;
  }
}
@media (max-width:480px){
  .key-persons.key-persons--full{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

.key-persons--full .key-persons__card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  height:100%; width:100%; padding:0 0 14px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow); overflow:hidden; position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.key-persons--full .key-persons__card::before{
  content:""; display:block; width:100%; height:4px; flex:0 0 auto;
  background:linear-gradient(90deg, var(--navy), var(--saffron));
}
.key-persons--full .key-persons__card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(11,61,103,.18);
  border-color:var(--saffron);
}

/* Square photos, neatly framed — no circular crop. */
.key-persons--full .key-persons__card .key-persons__photo-wrap{
  width:calc(100% - 20px); aspect-ratio:1/1; overflow:hidden; border-radius:6px;
  margin:10px auto 10px; box-shadow:0 2px 6px rgba(11,61,103,.15);
  background:var(--bg);
}
.key-persons--full .key-persons__card img{
  width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
}
/* Zoom-on-hover only for devices with a real pointer — on touch/mobile a tap
   can leave :hover "stuck" active, so the zoomed-in image ends up cropping
   more of the head off instead of showing it cleanly. */
@media (hover:hover) and (pointer:fine){
  .key-persons--full .key-persons__card img{ transition:transform .4s ease; }
  .key-persons--full .key-persons__card:hover img{ transform:scale(1.1); }
}

.key-persons--full .key-persons__card h4{
  font-size:.82rem; margin:0 10px 6px; position:relative; padding-bottom:6px; line-height:1.25;
}
.key-persons--full .key-persons__card h4::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:24px; height:2px; background:var(--saffron); border-radius:2px;
}
.key-persons--full .key-persons__card p{
  display:inline-block; font-size:.6rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--navy); background:var(--bg); padding:3px 9px; border-radius:999px; margin:0 10px 6px;
}
.key-persons--full .key-persons__desc{
  font-size:.68rem; font-style:italic; color:var(--text-muted); margin:0 10px; text-transform:none;
  background:none; padding:0; border-radius:0; font-weight:400; letter-spacing:normal; display:block;
}

/* -------------------------------------------------------------------------
   4. Services grid — equal card size, equal image size
   ---------------------------------------------------------------------- */
.services-grid{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.service-card{ display:flex; flex-direction:column; height:100%; }
.service-card__icon{ overflow:hidden; }
.service-card__icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.service-card p{ flex:1 1 auto; }

/* -------------------------------------------------------------------------
   5. External Link "Leaving Website" popup
   ---------------------------------------------------------------------- */
body.gdc-extlink-open{ overflow:hidden; }

.gdc-extlink-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(8,26,45,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:gdc-extlink-fade-in .18s ease;
}
.gdc-extlink-overlay[hidden]{ display:none; }

@keyframes gdc-extlink-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes gdc-extlink-pop-in{
  from{ opacity:0; transform:translateY(12px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.gdc-extlink-modal{
  position:relative; background:var(--card-bg); border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  max-width:460px; width:100%; padding:32px 28px 26px;
  border-top:5px solid var(--saffron);
  animation:gdc-extlink-pop-in .22s ease;
}
.gdc-extlink-modal__close{
  position:absolute; top:12px; right:12px; background:none; border:0; cursor:pointer;
  color:var(--text-muted); padding:6px; border-radius:4px; display:flex;
}
.gdc-extlink-modal__close:hover{ color:var(--saffron-dark); background:var(--bg); }
.gdc-extlink-modal__title{
  font-size:1.15rem; margin:0 28px 12px 0; color:var(--navy);
}
.gdc-extlink-modal__message{
  font-size:.92rem; color:var(--text); line-height:1.6; margin:0 0 14px;
}
.gdc-extlink-modal__url{
  font-size:.78rem; color:var(--text-muted); background:var(--bg); border-radius:4px;
  padding:8px 12px; margin:0 0 22px; word-break:break-all; font-family:monospace;
}
.gdc-extlink-modal__actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end;
}
.gdc-extlink-modal__cancel{
  background:#fff; color:var(--navy); border:2px solid var(--border);
  padding:9px 20px; border-radius:4px; font-size:.9rem; font-weight:600; cursor:pointer;
}
.gdc-extlink-modal__cancel:hover{ background:var(--bg); border-color:var(--navy); }
.gdc-extlink-modal__continue{
  margin-top:0;
}

@media (max-width:480px){
  .gdc-extlink-modal{ padding:26px 18px 20px; }
  .gdc-extlink-modal__actions{ flex-direction:column-reverse; }
  .gdc-extlink-modal__actions .btn,
  .gdc-extlink-modal__cancel{ width:100%; justify-content:center; }
}

/* -------------------------------------------------------------------------
   6. Document/File "Open Document" popup — independent of the External
   Link popup above (separate overlay, separate modal, own settings), but
   shares the same visual language. A navy top border (vs. saffron for
   External Links) gives it a distinct identity at a glance.
   ---------------------------------------------------------------------- */
body.gdc-docpopup-open{ overflow:hidden; }

.gdc-docpopup-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(8,26,45,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:gdc-extlink-fade-in .18s ease;
}
.gdc-docpopup-overlay[hidden]{ display:none; }

.gdc-docpopup-modal{
  position:relative; background:var(--card-bg); border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  max-width:460px; width:100%; padding:32px 28px 26px;
  border-top:5px solid var(--navy);
  animation:gdc-extlink-pop-in .22s ease;
}
.gdc-docpopup-modal__close{
  position:absolute; top:12px; right:12px; background:none; border:0; cursor:pointer;
  color:var(--text-muted); padding:6px; border-radius:4px; display:flex;
}
.gdc-docpopup-modal__close:hover{ color:var(--saffron-dark); background:var(--bg); }
.gdc-docpopup-modal__title{
  font-size:1.15rem; margin:0 28px 12px 0; color:var(--navy);
}
.gdc-docpopup-modal__message{
  font-size:.92rem; color:var(--text); line-height:1.6; margin:0 0 14px;
}
.gdc-docpopup-modal__filename{
  font-size:.78rem; color:var(--text-muted); background:var(--bg); border-radius:4px;
  padding:8px 12px; margin:0 0 22px; word-break:break-all; font-family:monospace;
}
.gdc-docpopup-modal__actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end;
}
.gdc-docpopup-modal__cancel{
  background:#fff; color:var(--navy); border:2px solid var(--border);
  padding:9px 20px; border-radius:4px; font-size:.9rem; font-weight:600; cursor:pointer;
}
.gdc-docpopup-modal__cancel:hover{ background:var(--bg); border-color:var(--navy); }
.gdc-docpopup-modal__continue{ margin-top:0; }

@media (max-width:480px){
  .gdc-docpopup-modal{ padding:26px 18px 20px; }
  .gdc-docpopup-modal__actions{ flex-direction:column-reverse; }
  .gdc-docpopup-modal__actions .btn,
  .gdc-docpopup-modal__cancel{ width:100%; justify-content:center; }
}

/* -------------------------------------------------------------------------
   7. Event Section — fully controlled from Theme Options → Event Section.
   Appearance/scrolling values arrive as inline CSS custom properties on
   #gdc-event-section (see front-page.php); this stylesheet just consumes
   them, with sane fallbacks so the block still looks right before any
   settings have been saved.
   ---------------------------------------------------------------------- */
.events-block{
  --event-text: var(--text);
  --event-hover: var(--navy);
  --event-border: var(--border);
  --event-radius: 6px;
  --event-shadow: 0 1px 4px rgba(11,61,103,.08);
  --event-padding: 12px;
  --event-gap: 8px;
  --event-font: var(--font-base);
  --event-font-size: 15px;
  --event-scroll-duration: 25s;
  --event-pause-duration: 2s;
  --event-visible-count: 3;
  font-family:var(--event-font);
  color:var(--event-text);
  border-radius:var(--event-radius);
}
.events-block__subtitle{ color:var(--text-muted); font-size:.85rem; margin:-6px 0 14px; }

/* ---- Card ---- */
.events-list{ list-style:none; margin:0; padding:0; }
.event-card{
  display:flex; gap:12px;
  padding:var(--event-padding) 0;
  margin-bottom:var(--event-gap);
  border-bottom:1px solid var(--event-border);
  font-size:var(--event-font-size);
}
.events-block--static .events-list,
.events-block--pagination .events-list{ background:transparent; }
.event-card:last-child{ border-bottom:0; }
.event-card__media{ position:relative; flex:0 0 auto; }
.event-card__media img{
  width:64px; height:64px; object-fit:cover; display:block;
  border-radius:calc(var(--event-radius) * .6);
  box-shadow:var(--event-shadow);
}
.event-card__badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--saffron); color:#fff; font-size:.6rem; font-weight:700;
  letter-spacing:.03em; padding:2px 6px; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.event-card__body{ min-width:0; flex:1 1 auto; }
.event-card__title{
  display:block; font-weight:600; font-size:1em; color:var(--event-text);
  text-decoration:none;
}
.event-card__title:hover,
.event-card__title:focus{ color:var(--event-hover); text-decoration:underline; }
.event-card__meta{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:4px;
  font-size:.78em; color:var(--text-muted);
}
.event-card__date,
.event-card__time{ display:inline-flex; align-items:center; gap:4px; }
.event-card__date .gdc-icon,
.event-card__time .gdc-icon{ width:14px; height:14px; }
.event-card__desc{ margin:6px 0 0; font-size:.85em; color:var(--text-muted); line-height:1.5; }
.event-card__readmore{
  display:inline-flex; align-items:center; gap:4px; margin-top:6px;
  font-size:.8em; font-weight:600; color:var(--event-hover); text-decoration:none;
}
.event-card__readmore:hover{ text-decoration:underline; }
.events-list__empty{ color:var(--text-muted); font-size:.9em; padding:12px 0; }

/* ---- Entrance / transition animation style ---- */
.events-block.anim-fade .event-card{ animation:gdc-event-fade-in .35s ease both; }
.events-block.anim-slide .event-card{ animation:gdc-event-slide-in .35s ease both; }
@keyframes gdc-event-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gdc-event-slide-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .events-block.anim-fade .event-card,
  .events-block.anim-slide .event-card{ animation:none; }
}

/* ---- Mode: Vertical Auto Scrolling ---- */
.events-block--scroll .events-block__viewport{
  overflow:hidden; /* no browser scrollbar visible */
  position:relative;
  /* Cap the viewport to roughly N visible cards; JS refines this to the
     actual measured row height once the cards have rendered. */
  max-height:calc(var(--event-visible-count) * 92px);
}
/* Scrolling itself is JS-driven (event-section.js) — a single item-height
   "step" at a time, so "Pause Duration Between Events" and "Scroll Speed"
   can both be honored precisely (a continuous CSS keyframe can't pause
   between items). CSS only supplies the smooth-transition easing. */
.events-block--scroll .events-list{ will-change:transform; }
.events-block--scroll[data-smooth="1"] .events-list{ transition:transform .6s ease; }
.events-block--scroll[data-smooth="0"] .events-list{ transition:none; }
@media (prefers-reduced-motion:reduce){
  .events-block--scroll .events-list{ transition:none !important; transform:none !important; }
  .events-block--scroll .events-block__viewport{ overflow:visible; max-height:none; }
}

.events-block__pause-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:transparent; border:1px solid var(--event-border); border-radius:4px;
  padding:5px 10px; font-size:.78rem; font-family:inherit; color:var(--event-text);
  cursor:pointer;
}
.events-block__pause-toggle:hover{ background:var(--bg); border-color:var(--event-hover); }
.events-block__pause-toggle:focus-visible{ outline:2px solid var(--event-hover); outline-offset:2px; }
.events-block__pause-icon{ width:10px; height:10px; flex:0 0 auto; position:relative; }
.events-block__pause-icon::before,
.events-block__pause-icon::after{
  content:""; position:absolute; top:0; width:3px; height:10px; background:currentColor;
}
.events-block__pause-icon::before{ left:0; }
.events-block__pause-icon::after{ left:6px; }
.events-block__pause-toggle.is-paused .events-block__pause-icon{
  width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:8px solid currentColor;
}
.events-block__pause-toggle.is-paused .events-block__pause-icon::before,
.events-block__pause-toggle.is-paused .events-block__pause-icon::after{ content:none; }
.events-block__pause-state--resume{ display:none; }
.events-block__pause-toggle.is-paused .events-block__pause-state--pause{ display:none; }
.events-block__pause-toggle.is-paused .events-block__pause-state--resume{ display:inline; }

/* ---- Mode: Static List ---- */
.events-block--static .events-block__viewport{ overflow:visible; }

/* ---- Mode: Pagination ---- */
.events-block--pagination .events-block__viewport{ overflow:visible; }
.events-block--pagination.is-loading .events-list{ opacity:.5; pointer-events:none; transition:opacity .15s ease; }

.event-section__pagination{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px;
}
.event-section__pagination a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 8px;
  border:1px solid var(--event-border); border-radius:4px;
  font-size:.82rem; color:var(--event-text); text-decoration:none;
}
.event-section__pagination a:hover{ background:var(--bg); border-color:var(--event-hover); }
.event-section__pagination a.is-active{
  background:var(--event-hover); border-color:var(--event-hover); color:#fff; font-weight:700;
}
.event-section__pagination a:focus-visible{ outline:2px solid var(--event-hover); outline-offset:2px; }

@media (max-width:480px){
  .event-section__pagination a{ min-width:28px; height:28px; font-size:.75rem; }
}