/* Styling for raw imported WordPress page/post content — plain tags with no
   classes (h1/h2/p/ul/img/a), scoped under .page-content so it never leaks
   into the hand-built homepage sections in styles.css.

   This is deliberately basic: these pages haven't had their real visual
   rebuild yet (see Modules/Content/app/Console/Commands/ImportWordPressContent.php),
   so the goal here is "reads cleanly", not "matches the new design exactly". */

.page-header{
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--stone);
  border-bottom: 1px solid var(--stone-2);
}
.page-header h1{
  font: 500 clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.12 var(--display);
  letter-spacing: -.02em;
  color: var(--navy);
  max-width: 26ch;
  text-wrap: balance;
}

.page-content{
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 72ch;
  margin-inline: auto;
}
.page-content > *{ margin-bottom: 1.35rem; }
.page-content > *:last-child{ margin-bottom: 0; }

.page-content h1,
.page-content h2,
.page-content h3{
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin-top: 2rem;
}
.page-content h1{ font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 500; }
.page-content h2{ font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); font-weight: 500; }
.page-content h3{ font-size: 1.15rem; font-weight: 600; }

.page-content p{ color: var(--text-mid); line-height: 1.7; }
.page-content strong{ color: var(--navy); font-weight: 600; }
.page-content a{ color: var(--crimson); text-decoration: underline; text-underline-offset: .15em; }
.page-content a:hover{ color: var(--crimson-lt); }

.page-content ul,
.page-content ol{ padding-left: 1.4rem; color: var(--text-mid); }
.page-content ul{ list-style: disc; }
.page-content ol{ list-style: decimal; }
.page-content li + li{ margin-top: .4rem; }

.page-content img{
  max-width: 100%; height: auto; border-radius: 3px; display: block;
}

.page-content blockquote{
  border-left: 2px solid var(--crimson);
  background: var(--stone);
  padding: 1.1rem 1.4rem;
  font-style: italic;
  color: var(--navy);
}

/* ============================================================
   Donations module — form controls not covered by styles.css
   (that file is the hand-authored homepage design; these are
   generic enough to earn a place alongside it, not bolted on).
   ============================================================ */
.field-label{
  font: 500 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mid);
}
.pill-group{ display: grid; gap: .6rem; }
.pill{
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  padding: .75rem 1rem; font: 500 .9375rem/1 var(--body); color: var(--navy);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pill.is-active{ background: var(--navy); border-color: var(--navy); color: #fff; }
.pill:not(.is-active):hover{ border-color: var(--silver); }

.text-field{
  display: block; width: 100%; margin-top: .4rem;
  border: 1px solid var(--rule); border-radius: 3px;
  padding: .7rem .85rem; font: 400 .9375rem var(--body); color: var(--navy);
  background: var(--paper);
}
.text-field:focus{ outline: none; border-color: var(--navy); }
.currency-field{
  display: flex; align-items: center; gap: .3rem; margin-top: .4rem;
  border: 1px solid var(--rule); border-radius: 3px; padding: .7rem .85rem;
  background: var(--paper);
}
.currency-field:focus-within{ border-color: var(--navy); }
.currency-field span{ color: var(--text-mid); }
.currency-field input{
  border: 0; padding: 0; width: 6rem; font: 400 .9375rem var(--body); color: var(--navy);
}
.currency-field input:focus{ outline: none; }

.form-error{
  border: 1px solid var(--crimson); background: #FBEAEC; color: var(--crimson);
  border-radius: 3px; padding: .9rem 1.1rem; font-size: .9375rem;
}
.form-error ul{ list-style: disc; padding-left: 1.2rem; }

/* ============================================================
   Hub pages (who-we-are, what-we-do) and other hand-built
   Content templates — card grids matching styles.css's .give /
   .panel tile language.
   ============================================================ */
.tile-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 2rem;
}
.tile{
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--paper); border-top: 2px solid var(--navy);
  padding: 1.5rem 1.4rem; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tile:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 22px 40px -28px rgba(11,23,41,.4);
}
.tile:active{ transform: translateY(-1px) scale(.98); transition-duration: .12s; }
.tile__h{ font: 500 1.1rem/1.3 var(--display); color: var(--navy); letter-spacing: -.01em; }
.tile__p{ font-size: .875rem; line-height: 1.55; color: var(--text-mid); }
.tile__go{
  margin-top: auto; font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson);
}

.photo-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .85rem; margin-top: 2rem;
}
.photo-grid figure{ overflow: hidden; border-radius: 3px; background: var(--stone); aspect-ratio: 4/3; }
.photo-grid img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.photo-grid a:hover img{ transform: scale(1.05); }

.directory-cta{
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule);
}

/* ============================================================
   Five Strategic Pillars — image cards (replaces the old tabbed
   explorer, whose two independently-sized columns left uneven
   whitespace once the pillar names got long).
   ============================================================ */
.pillars-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 2.5rem;
}
.pillar-card{
  display: flex; flex-direction: column;
  background: var(--paper); border-top: 2px solid var(--navy);
  overflow: hidden; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pillar-card:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 26px 48px -30px rgba(11,23,41,.4);
}
.pillar-card__media{ aspect-ratio: 16/10; overflow: hidden; background: var(--stone-2); }
.pillar-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.pillar-card__body{ padding: clamp(1.25rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.pillar-card__num{
  font: 600 .75rem var(--mono); color: var(--crimson); letter-spacing: .06em; margin-bottom: .6rem;
}
.pillar-card__h{
  font: 500 1.1875rem/1.25 var(--display); color: var(--navy); letter-spacing: -.01em; margin-bottom: .65rem;
}
.pillar-card__p{ color: var(--text-mid); font-size: .9375rem; line-height: 1.6; margin-bottom: 1rem; }
.pillar-card .give__cta{ margin-top: auto; padding-top: .25rem; }

/* .pillar-card is shared with the Gallery album grid (gallery.blade.php),
   where image-first is correct — you browse albums by their cover photo.
   On the homepage's "Five Strategic Pillars" (the only other user of this
   class), mobile stacking order should instead match every other
   text-with-supporting-image section on the site (.section-split: title
   and copy first, image second) — scoped to .programs so the gallery
   grid is untouched. */
@media (max-width:900px){
  .programs .pillar-card__media{ order: 2; }
  .programs .pillar-card__body{ order: 1; }
}

/* Business directory two-column content (For Community Members / For Businesses) */
.biz-cols{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem;
}
.biz-cols h3{ font: 600 1.0625rem var(--body); color: var(--navy); margin-bottom: .6rem; }
.biz-cols p{ color: var(--text-mid); font-size: .9375rem; line-height: 1.65; }
.biz-cols ul{ margin-top: .85rem; padding-left: 1.15rem; list-style: disc; color: var(--text-mid); font-size: .9375rem; }
.biz-cols li + li{ margin-top: .45rem; }
@media (max-width: 720px){ .biz-cols{ grid-template-columns: 1fr; } }

/* Section intro paired with a real photo — used where the text column alone
   left a block of empty space beside it at the top of the section. */
.section-split{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-split__media{
  border-radius: 3px; overflow: hidden; aspect-ratio: 4/3; background: var(--stone-2);
}
.section-split__media img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px){ .section-split{ grid-template-columns: 1fr; } }

/* Alternates the photo to the left instead of the right, for rhythm across
   a run of stacked section-splits (e.g. who-we-are's "Get to Know SSA"). */
.section-split--reverse{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.section-split--reverse > :first-child{ order: 2; }
.section-split--reverse > :last-child{ order: 1; }
/* :first-child/:last-child carry the same specificity as a class, which
   beat a bare `> *` reset below despite this media query coming later in
   the cascade — the mobile reset silently never applied, so every
   .section-split--reverse on the site showed image-before-text on
   mobile instead of matching .section-split's text-before-image. Match
   the selector specificity exactly so the later rule actually wins. */
@media (max-width: 900px){
  .section-split--reverse{ grid-template-columns: 1fr; }
  .section-split--reverse > :first-child{ order: initial; }
  .section-split--reverse > :last-child{ order: initial; }
}

/* Honest placeholder for sections without real data yet (Community Calendar) */
.coming-soon{
  margin-top: 2rem;
  border: 1px dashed var(--rule); border-radius: 4px;
  padding: 2rem 1.75rem; text-align: center;
  background: var(--paper); color: var(--text-mid); font-size: .9375rem; line-height: 1.6;
}
.coming-soon strong{
  display: block; color: var(--navy); font: 600 .9375rem var(--body); margin-bottom: .4rem;
}

/* FAQ answers that include a link (donation info, partner/volunteer CTAs) */
.qa__a a{ color: var(--crimson); text-decoration: underline; text-underline-offset: .15em; font-weight: 500; }
.qa__a p + p{ margin-top: .75rem; }

/* Org facts + contact card (About Us) — a quick-reference summary paired
   with the address and primary CTAs, closing out the page. */
.facts-panel{
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  background: var(--stone); border-top: 2px solid var(--navy);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.facts-panel__h{ font: 500 1.25rem var(--display); color: var(--navy); margin-bottom: 1.1rem; letter-spacing: -.01em; }
.facts-panel__addr{ font: 400 clamp(1.0625rem,1rem + .4vw,1.25rem)/1.4 var(--display); color: var(--navy); margin-top: .5rem; }
.facts-panel__addr a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--silver); }
.facts-panel__addr a:hover{ text-decoration-color: var(--navy); }
@media (max-width: 720px){ .facts-panel{ grid-template-columns: 1fr; } }

.facts{ display: grid; gap: .9rem; }
.facts > div{ display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.facts dt{
  flex: 0 0 9rem;
  font: 500 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid);
}
.facts dd{ font: 500 .9375rem var(--body); color: var(--navy); }

/* ============================================================
   People cards (Leadership & Team) — no real staff photos exist yet,
   so each person gets an initials avatar (like .icon-badge, but a
   name's initials instead of an icon) rather than a stand-in stock
   photo misattributed to a real, named individual.
   ============================================================ */
.person-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 2rem;
}
.person-card{
  background: var(--paper); border-top: 2px solid var(--navy);
  padding: 1.75rem 1.6rem; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.person-card:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 22px 40px -28px rgba(11,23,41,.4);
}
.avatar{
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  font: 500 1.125rem var(--display); letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
/* A real headshot, once one exists for that person — same slot, bigger,
   since a photo reads better at a larger size than initials do. */
.avatar--photo{
  width: 4.5rem; height: 4.5rem; overflow: hidden; background: var(--stone-2);
}
.avatar--photo img{ width: 100%; height: 100%; object-fit: cover; }
.person-card__name{ font: 500 1.125rem/1.3 var(--display); color: var(--navy); letter-spacing: -.01em; }
.person-card__role{
  font: 600 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson); margin-top: .4rem; margin-bottom: .85rem;
}
.person-card__bio{ font-size: .9375rem; line-height: 1.6; color: var(--text-mid); }

/* ============================================================
   Lightbox (Gallery albums) — vanilla-JS popup viewer with prev/next,
   built by design/js/lightbox.js. Markup is created by JS on first
   use; this is purely presentational.
   ============================================================ */
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,23,41,.94);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.lightbox.is-open{ opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.lightbox__frame{ position: relative; max-width: min(92vw, 1200px); max-height: 86vh; }
.lightbox__img{ display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: 3px; }
.lightbox__close,
.lightbox__nav{
  position: fixed; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.32); cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.lightbox__close{ top: 1.25rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; }
.lightbox__nav{ top: 50%; transform: translateY(-50%); width: 3.25rem; height: 3.25rem; }
.lightbox__prev{ left: 1.25rem; }
.lightbox__next{ right: 1.25rem; }
.lightbox__close svg,
.lightbox__nav svg{ width: 1.375rem; height: 1.375rem; }
.lightbox__count{
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.78); font: 500 .8125rem/1 var(--mono); letter-spacing: .06em;
}
@media (max-width: 640px){
  .lightbox__nav{ width: 2.5rem; height: 2.5rem; }
  .lightbox__prev{ left: .5rem; }
  .lightbox__next{ right: .5rem; }
  .lightbox__close{ top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce){ .lightbox{ transition: none; } }

/* Gallery album page — optional short description under the title */
.album-desc{ margin-top: .85rem; max-width: 62ch; color: var(--text-mid); font-size: 1.0625rem; line-height: 1.6; }
.album-back{
  display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson); text-decoration: none; margin-bottom: 1.5rem;
}
.album-back:hover span:last-child{ transform: translateX(-4px); }
.album-back span:last-child{ display: inline-block; transition: transform .3s var(--ease); }

/* ============================================================
   Pathway flow (Mission & Vision) — a horizontal chain of pill
   steps connected by arrows; wraps to a vertical chain on mobile
   with the arrows rotated to point down instead of right.
   ============================================================ */
.pathway-flow{
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 0;
  margin-top: 2rem;
}
.pathway-flow__step{
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px;
  padding: .65rem 1.25rem .65rem .6rem;
}
.pathway-flow__num{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--navy); color: #fff; font: 600 .75rem/1 var(--mono);
}
.pathway-flow__label{ font: 500 .9375rem var(--body); color: var(--navy); white-space: nowrap; }
.pathway-flow__arrow{ flex: none; width: 1.25rem; height: 1.25rem; margin-inline: .5rem; color: var(--crimson); }
@media (max-width: 720px){
  .pathway-flow{ flex-direction: column; align-items: stretch; gap: .6rem; }
  .pathway-flow__step{ width: 100%; }
  .pathway-flow__arrow{ align-self: center; transform: rotate(90deg); }
}

/* ============================================================
   Closing CTA band (Mission & Vision) — a solid-navy band with a
   centered headline and 2-3 buttons, for pages that don't already
   end on their own Get Involved section (the homepage's version of
   this was removed as redundant with its own Get Involved section;
   this page has no such section, so it earns a real closing band).
   ============================================================ */
.close-cta{ background: var(--navy); text-align: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.close-cta__h{
  font: 500 clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)/1.15 var(--display);
  color: #fff; letter-spacing: -.02em; max-width: 26ch; margin-inline: auto; text-wrap: balance;
}
.close-cta__p{
  margin-top: 1.1rem; color: rgba(255,255,255,.78);
  max-width: 52ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.6;
}
.close-cta__actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ============================================================
   Community Calendar — real month grid (public /slavic-calendar/).
   Sunday-first, 7 columns; leading/trailing days from adjacent
   months are dimmed but still show their own events for continuity.
   No JavaScript required — month nav and the organization filter are
   plain links/a GET form.
   ============================================================ */
.cal-filter{
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.cal-filter label{
  display: block; font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mid); margin-bottom: .4rem;
}
.cal-filter select{
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  padding: .55rem .75rem; font: 500 .875rem var(--body); color: var(--navy); min-width: 14rem;
}
.cal-grid{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden;
}
.cal-grid__weekday{
  padding: .6rem .5rem; text-align: center;
  font: 600 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mid); background: var(--stone);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cal-cell{
  min-height: 7rem; padding: .5rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .3rem; background: var(--paper);
}
.cal-cell--outside{ background: var(--stone); }
.cal-cell--today{ background: var(--mist); }
.cal-cell__num{ font: 600 .8125rem var(--mono); color: var(--navy); }
.cal-cell--outside .cal-cell__num{ color: var(--silver); }
.cal-chip{
  display: flex; align-items: center; gap: .35rem;
  padding: .2rem .4rem; border-radius: 3px;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: .75rem; line-height: 1.3; color: var(--navy); text-decoration: none;
  transition: border-color .2s var(--ease);
}
.cal-chip:hover{ border-color: var(--navy); }
.cal-chip__logo{ width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; flex: none; }
.cal-chip__dot{ width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.cal-chip__time{ font: 500 .6875rem var(--mono); color: var(--text-mid); flex: none; }
.cal-chip__title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px){
  .cal-grid__weekday{ font-size: .5625rem; padding: .4rem .2rem; }
  .cal-cell{ min-height: auto; padding: .35rem; }
  .cal-chip{ font-size: .6875rem; }
  .cal-chip__title{ white-space: normal; }
}

/* Every event chip above opens this instead of navigating away (the
   real /slavic-calendar/{slug}/ page still exists — the chip's href is
   only prevented, not removed, so JS-disabled/crawler/middle-click all
   still work). */
[x-cloak]{ display: none !important; }
.cal-modal{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(11,23,41,.55);
}
.cal-modal__panel{
  position: relative;
  background: var(--paper); border-radius: 6px; max-width: 42rem; width: 100%;
  max-height: calc(100vh - 3rem); overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 30px 60px -20px rgba(11,23,41,.5);
}
.cal-modal__close{
  position: absolute; top: 1rem; right: 1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stone); color: var(--navy); border: none; cursor: pointer;
  transition: background .2s var(--ease);
}
.cal-modal__close:hover{ background: var(--mist-2); }
.cal-modal__close svg{ width: 1.125rem; height: 1.125rem; }
.cal-modal__eyebrow{
  display: flex; align-items: center; gap: .5rem;
  font: 500 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mid); padding-right: 2.5rem;
}
.cal-modal__logo{ width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; }
.cal-modal__title{ font: 500 1.5rem/1.3 var(--display); color: var(--navy); margin-top: .5rem; }
.cal-modal__meta{ margin-top: .35rem; color: var(--text-mid); font-size: .9375rem; }
.cal-modal__body{ margin-top: 1.25rem; }

.cal-modal-fade-enter, .cal-modal-fade-leave{ transition: opacity .2s var(--ease); }
.cal-modal-fade-enter-start, .cal-modal-fade-leave-end{ opacity: 0; }
.cal-modal-fade-enter-end, .cal-modal-fade-leave-start{ opacity: 1; }
.cal-modal-panel-enter, .cal-modal-panel-leave{ transition: opacity .2s var(--ease), transform .2s var(--ease); }
.cal-modal-panel-enter-start, .cal-modal-panel-leave-end{ opacity: 0; transform: scale(.96) translateY(8px); }
.cal-modal-panel-enter-end, .cal-modal-panel-leave-start{ opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce){
  .cal-modal-fade-enter, .cal-modal-fade-leave,
  .cal-modal-panel-enter, .cal-modal-panel-leave{ transition-duration: .01s; }
  .cal-modal-panel-enter-start, .cal-modal-panel-enter-end,
  .cal-modal-panel-leave-start, .cal-modal-panel-leave-end{ transform: none; }
}

/* ============================================================
   Business Directory — listing cards (public /business-directory/)
   and the profile-page facts/social row. Card visuals follow
   .pillar-card's established language (paper surface, navy top rule
   that turns crimson on hover) with a circular logo avatar in place
   of a full-bleed photo, since a logo is far more reliably available
   than a banner image across real listings.
   ============================================================ */
.biz-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 2rem;
}
.biz-card{
  position: relative;
  background: var(--paper); border-top: 2px solid var(--navy);
  padding: 1.75rem 1.6rem; display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.biz-card:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 22px 40px -28px rgba(11,23,41,.4);
}
.biz-card__head{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.biz-card__logo{
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--stone);
}
.biz-card__name{ font: 500 1.125rem/1.3 var(--display); color: var(--navy); letter-spacing: -.01em; }
.biz-card__tagline{ font-size: .875rem; color: var(--text-mid); margin-top: .2rem; }
.biz-card__tags{ display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.biz-card__tag{
  font: 500 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  background: var(--stone); color: var(--navy); padding: .3rem .6rem; border-radius: 999px;
}
.biz-card .give__cta{ margin-top: auto; padding-top: .25rem; }

/* Sponsor corner ribbon — deliberately louder than .biz-card__tag so a
   sponsored listing reads as a trust/status signal at a glance, not just
   another category. Icon + text together (never color alone). */
.biz-card__sponsor{
  position: absolute; top: 0; right: 1.1rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--crimson); color: #fff;
  font: 700 .625rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: .45rem .65rem; border-radius: 0 0 7px 7px;
  box-shadow: 0 10px 18px -10px rgba(150,24,43,.6);
}
.biz-card__sponsor svg{ width: .8rem; height: .8rem; flex: none; }

/* Status badges (Russian-speaking, Sponsor) — kept visually distinct from
   the plain .biz-card__tag categories: bolder weight, an icon, and a
   dedicated color per badge instead of the neutral stone/navy tag style.
   Shared between the directory card and the profile hero. */
.biz-badges{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.biz-badge{
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font: 700 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 999px;
}
.biz-badge svg{ width: .9rem; height: .9rem; flex: none; }
.biz-badge--lang{ background: var(--mist); color: var(--navy); border: 1px solid var(--mist-2); }
.biz-badge--sponsor{ background: var(--crimson); color: #fff; }

/* Profile page's social-link row */
.biz-social{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.biz-social__link{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--stone); color: var(--navy); border: 1px solid var(--rule);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.biz-social__link:hover{ background: var(--navy); color: #fff; border-color: var(--navy); }
.biz-social__link svg{ width: 1.125rem; height: 1.125rem; }