/* The public Cesaret Duvarı card ("Ben de vardım."), shared by the Panel preview, the card fragment and
   the wall page. Self-contained: it defines its own colours, so it renders the same in every page that
   links it. The avatar colour follows the dot's link when the wall's script adds a modifier, in the
   wall's colours (brand guide, 2026-10-08), as the wall's tooltip and the story image's avatar draw them:
   the guide's darker on-white shade as the disc, with white initials, in a ring of the link's colour.
   Blue #2B61AE in #2F6AB4 for the lying link, red #BE2C27 in #EF4137 for the standing one. The wall
   itself draws no initials. */
.wall-card{--wc-accent:#2B61AE;--wc-ring:#2F6AB4;--wc-ink:#FFFFFF;position:relative;box-sizing:border-box;max-width:420px;overflow:hidden;
  padding:20px;border-radius:18px;color:#fff;font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(120% 120% at 85% 20%,#073D74 0%,#01152C 80%);container-type:inline-size}
.wall-card *{box-sizing:border-box}
.wall-card--red{--wc-accent:#BE2C27;--wc-ring:#EF4137}
.wall-card--blue{--wc-accent:#2B61AE;--wc-ring:#2F6AB4}
.wall-card__said{margin:0 0 14px;font-size:24px;font-weight:700;line-height:1.2;color:#fff;overflow-wrap:break-word}
.wall-card__said::after{content:"";display:block;width:36px;height:3px;margin-top:8px;border-radius:2px;background:#EF4137}
.wall-card__person{display:flex;gap:13px;align-items:flex-start}
.wall-card__avatar{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:18px;color:var(--wc-ink);background:var(--wc-accent);border:3px solid #fff;
  box-shadow:0 0 0 2px var(--wc-ring)}
/* The photo fills the avatar circle, cropped to it, stacked over the monogram: a loaded photo (an
   opaque JPEG) covers the initials, and one that cannot load leaves them. A broken image draws its
   ::after in Chromium and Firefox, so the initials cover the broken-image icon there too; Safari
   draws nothing for it and shows the monogram underneath. */
.wall-card__avatar{overflow:hidden}
.wall-card__avatar>*{grid-area:1/1}
.wall-card__photo{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.wall-card__photo::after{content:attr(data-mono);position:absolute;inset:0;display:grid;place-items:center;
  border-radius:50%;background:var(--wc-accent);color:var(--wc-ink);font:inherit}
/* Elements the application form's preview renders empty and hidden until the visitor fills them;
   without this, their own display rules would show them. */
.wall-card [hidden]{display:none!important}
.wall-card__body{min-width:0}
.wall-card__name{margin:0;font-size:18px;line-height:1.2;font-weight:600;color:#fff;overflow-wrap:break-word}
.wall-card__city{margin:2px 0 0;font-size:13px;color:#B9C6E0}
.wall-card__sentence{display:block;margin:8px 0 0;font-size:14px;line-height:1.5;color:#fff;overflow-wrap:break-word}
.wall-card__no{margin:10px 0 0;font-size:12px;color:#B9C6E0;font-variant-numeric:tabular-nums}
.wall-card__no b{display:block;font-size:15px;letter-spacing:.06em;color:#fff}
/* A narrow card (a small phone with very large text, where the page is laid out at about half its
   width): the avatar goes above the text, so the name keeps the card's whole width and breaks only
   between words, or inside a word too long for a line; the headline and name are a little smaller.
   Every ordinary phone keeps the row. Browsers without container queries keep the row as well. */
@container (max-width:180px){
  .wall-card__person{flex-direction:column;gap:10px}
  .wall-card__body{width:100%}
  .wall-card__said{font-size:20px}
  .wall-card__name{font-size:16px}
}
@media (max-width:260px){.wall-card{padding:14px}}
.wall-card-preview{margin:0;padding:16px;background:#f4f6f8}