/* ================== card (section source: card.css) ================== */
/* =========================================================
   Repeating content card component (self-contained, no JS)
   ========================================================= */

/* Grid: stacked <768px, 2-up >=768px, 3-up >=1024px */
.cards {
  /* padding: 1.5rem 0 2rem; */

}

.cards__grid {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  
}

@media (min-width: 768px) {
  .cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card */
.card {
 
  display: flex;
  flex-direction: column;
  padding: 16px 16px 32px;
  text-align: left;
}

.card__media {
  position: relative;
  margin: -16px 0 0; /* inset image 16px left/right, flush top */
  overflow: hidden;
}

.card__image {
  width: 100%;
  height: auto; /* natural aspect — full image, no crop */
  display: block;
}

.card__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  margin: 0 0 0 0px;
  background: var(--panel);
  padding: 0.25em 0.625em 0.25em 5px;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.card__subtitle {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}

.card__text {
  margin: 8px 0 20px;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink);
}

.card__link {
  margin-top: auto;      /* push to bottom, aligns links across cards */
  align-self: flex-start; /* don't stretch full card width — underline hugs the word */
  color: var(--navy);         /* brand navy, on-brand like every other link */
  font-size: 14px;
  font-weight: 600;
}

.card__link:hover {
  color: var(--slate);   /* site slate hover, matches the sidebar link hover */
}

/* ================== people (section source: people.css) ================== */
/* =========================================================
   People card component (vcard) — repeating unit for the
   team directory. Fluid within its grid column.
   ========================================================= */

.people-grid-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 1rem;
  padding: 1rem 0.9375rem 2rem;
}

@media (min-width: 768px) {
  .people-grid-wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .people-grid-wrap { grid-template-columns: repeat(3, 1fr); }
}

/* The card (vcard list) */
.vcard {
  list-style: none;
  margin: 8px 0 40px;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border-card);
}

.vcard .impact {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.vcard .impact a {
  /* keeps site link style: navy, semibold, underline border */
}

.vcard .position {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate);
}

.vcard .telephone-number {
  font-size: 14px;
  line-height: 20px;
}

.vcard .email {
  font-size: 14px;
  line-height: 20px;
  margin-top: 24px;
}

.vcard .email a {
  font-weight: 400;
}

/* =========================================================
   Person detail card — profile photo stacked over a vcard,
   as on cislondon.com person pages (svetlana-london.php).
   Left column of the person layout: .person-card in a 4-col.
   ========================================================= */
.person-card .profilepicture,
.person-photo-mobile .profilepicture {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px 0 20px; /* 20px top per old cislondon.css; 20px bottom spacing */
  padding: 2px; /* .panel idiom from cislondon.css */
  background: var(--white);
}

/* Small / mobile: the card photo is a `hide-for-small` copy, but its
   display:block above has higher specificity than .hide-for-small's
   display:none — so pin it hidden explicitly. This is > layout.css's
   .show-for-small, so the .person-photo-mobile copy below the bio shows. */
@media (max-width: 40.0624em) {
  .person-card .profilepicture { display: none !important; }
}

/* ranking / language lines inside the vcard (old site: .lingual, 90%) */
.vcard .lingual {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* the ranked-directory detail line under each heading */
.vcard .lingual--detail {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 16px;
}

/* =========================================================
   Key-contacts sidebar — right column of the person pages:
   h5.listTitle + ul.rhs-sidebar-list. The bullet is a CSS
   background (span.bullet), not an img — the current entry's
   bullet swaps to the dark image purely via li.is-current.
   State: main.js marks li.is-current when an href matches the
   current page (body.page-people only); hover previews it.
   ========================================================= */
.rhs-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rhs-sidebar-list li {
  font-size: 14px;
  padding-left: 1em;
  padding-top: 0;
  padding-bottom: 14px;
  text-indent: -0.7em;
}

.rhs-sidebar-list li a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
}

/* hover and current share one look: slate (site hover colour),
   no underline — the dark bullet is what marks the current entry */
.rhs-sidebar-list li:hover a,
.rhs-sidebar-list li.is-current a {
  color: var(--slate);
}

/* bullet: round 8px dot (source PNG is a round 15px dot — never
   squash it; light by default, dark for the current entry) */
.rhs-sidebar-list .bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  background: url("../img/bullet.png") no-repeat center / 8px 8px;
}

.rhs-sidebar-list li.is-current .bullet {
  background-image: url("../img/bullet-dark.png");
}

/* "Key Contacts:" title */
h5.listTitle {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ================== contact-card (section source: contact-card.css) ================== */
/* ==========================================================================
   contact-card.css — address card (.vcard) for the contact page
   Remade from cislondon.com css/cislondon.css
   ========================================================================== */

.address-card {
  background-color: var(--white);
  border: 1px solid var(--border-card);
  width: 100%;
  list-style: disc outside;
  margin: 0 0 1.25rem;
  padding: 10px 0 10px 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
}

.address-card li {
  display: block;
  margin: 0;
}

/* address detail lines run slightly smaller than the name line */
.address-card .street-address,
.address-card .locality,
.address-card .zip,
.address-card .telephone-number,
.address-card .fax-number {
  font-size: 90%;
}

/* name line (also defined in typography.css, kept scoped here) */
.address-card .impact {
  font-weight: 600;
}

/* map panel beside the card */
.panel {
  padding: 2px;
}

/* stretch the map to match the address card's height */
@media (min-width: 40.0625em) { /* ≥ medium: columns side by side */
  .map-row .hero-block {
    display: flex !important; /* beats .hide-for-small's display:inherit !important */
    align-items: stretch;
    flex-wrap: wrap;
  }

  .map-row .hero-block .address-card {
    margin-bottom: 0; /* bottoms align when side-by-side */
  }

  .map-row .londonMapLink {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .map-row .londonMapLink a {
    flex: 1;
    display: flex;
    border-bottom: none;
  }

  .map-row .londonMapLink img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 40.0624em) { /* stacked: visible, floats stack (small-12=100%), vcard margin gives the gap, natural map aspect */
  .map-row .hero-block {
    display: block !important; /* .hide-for-small hides it below the breakpoint */
  }

  .map-row .londonMapLink img {
    width: 100%;
    height: auto;
  }
}

/* required CARTO/OSM credit, small and unobtrusive */
.map-attribution {
  font-size: 10px;
  line-height: 1.2;
  margin: 2px 0 0;
  text-align: right;
  color: var(--slate);
}
.map-attribution a {
  font-size: 10px;
  font-weight: 400;
  color: var(--slate);
  border-bottom: none;
}

/* ================== toolbox (section source: toolbox.css) ================== */
/* =========================================================
   Toolbox page — demo-preview bits only.
   Everything real (nav, slider, hero-block, vcard, card,
   hr.type2) reuses the shared sheets; nothing here restyles
   a shared component beyond sizing previews inside cards.
   ========================================================= */

/* In-card mini preview area: fixed-height grey well so the
   card__media row stays a consistent tile across the grid. */
.toolbox__demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 1rem;
  background: var(--well);
  overflow: hidden;
}

/* Banner preview: mini slider-shaped box with title overlay */
.toolbox__demo--banner {
  position: relative;
  padding: 0;
  display: block;
}
.toolbox__demo--banner img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.slider__title--mini {
  width: auto;
  font-size: 13px;
  line-height: 1.2;
  padding: 2px 8px 2px 4px;
  text-transform: uppercase;
}

/* Person-card preview inside a card: white well, scaled photo */
.toolbox__demo--person {
  background: var(--white);
  display: block;
  padding: 0.75rem;
}
.toolbox__demo--person .person-card {
  max-width: 200px;
  margin: 0 auto;
}

/* Key-contacts preview inside a card: white well, left-aligned list */
.toolbox__demo--contacts {
  background: var(--white);
  display: block;
  padding: 0.75rem 1rem;
  text-align: left;
}
.toolbox__demo--contacts .rhs-sidebar-list li {
  padding-bottom: 8px;
}
.toolbox__demo--contacts .rhs-sidebar-list li:last-child {
  padding-bottom: 0;
}

/* Nav-link preview inside a card */
.demo-link {
  display: inline-block;
  margin: 0 6px;
  font-size: 14px;
  text-transform: uppercase;
}
.demo-link.is-current {
  border-bottom: 3px solid var(--navy);
}

/* Hero-block 8/4 split preview (grey boxes, not real grid) */
.toolbox__split {
  display: flex;
  gap: 8px;
  width: 100%;
}
.toolbox__split span {
  font-size: 12px;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border-card);
  padding: 8px;
  text-align: center;
}
.toolbox__split .w8 { flex: 2; }
.toolbox__split .w4 { flex: 1; }

/* vcard preview inside a card: keep it compact */
.toolbox__demo .vcard {
  width: 100%;
  padding: 0.75rem;
}
.toolbox__demo .vcard .email { margin-top: 12px; }

/* Mini news-card preview */
.mini-news {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-card);
  padding: 0.75rem;
}
.mini-news__date {
  font-size: 12px;
  color: var(--slate);
  text-transform: uppercase;
}
.mini-news__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 4px;
}

/* Section titles for the live-preview part of the page.
   Layout here, text style lives in typography.css cascade —
   but this page's sheet is linked last and these selectors
   are element-level, so color/size declarations land. */
.toolbox__section-title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  padding: 0 0.9375rem;
  margin: 1.5rem 0 0.5rem;
}

/* hr.type2 has a fixed 970px width — inside a grid card that
   blows out min-content track sizing (whole grid overflows).
   Cap it wherever it appears in demo areas. */
.toolbox__demo hr.type2 {
  width: 100%;
}

/* Half-width rule demo */
.toolbox__rule--half {
  width: 50%;
  margin-left: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 1px 4px;
}