/* contact — the homepage "Contact Ivan" section (modular/contact.html.twig).
   Its own block file, registered in templates/base.html.twig's list. Loaded after css/style.css,
   so it only extends the locked base.

   2026-09-10 (client): the two panels swapped (that is template-side, not here) and the
   "Let's Connect" panel gained a cut-out portrait. The contact lines above it are unchanged.
   --------------------------------------------------------------------------------------- */

/* ---- Lead quote above the section title (2026-09-10, client) ----
   Moved here from the foot of Get Involved. style.css draws a plain 42px red bar on ::before for
   every .quote; the icon takes its place, so the bar has to be switched off explicitly — the
   <span> is an extra element, it replaces nothing on its own. Same pattern as .quote-ruled in
   css/blocks/why-running.css, where the campaign divider does the same job. */
.quote-lead::before{display:none}
.quote-lead{margin-top:0;margin-bottom:34px}
.quote-icon{
  display:block;
  width:34px;height:34px;
  margin:0 auto 14px;
  color:var(--red);
}
.quote-icon svg{width:100%;height:100%;fill:currentColor}
/* Second sentence on its own line, in red (2026-09-10, client). display:block is what breaks the
   line — the two strings are separate frontmatter keys, not one string with a <br>, so the copy
   stays editable without markup in it. */
.quote-accent{display:block;margin-top:8px;color:var(--red)}
@media(max-width:780px){
  .quote-lead{margin-bottom:26px}
  .quote-icon{width:28px;height:28px;margin-bottom:11px}
}

/* ---- Contact rows in "Let's Connect" (2026-09-10, client: "krajšie") ----
   Replaces the four <p><strong>Label:</strong> value</p> lines. Each row is one link: a round
   badge in the network's colour (same values as .social-badge in brand.css so the footer and
   this panel match), a small muted label, the handle in bold. Whole row is the hit area. */
.connect-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.connect-row a{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:14px;background:#f6f6f3;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.connect-row a:hover{transform:translateY(-2px);background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.connect-badge{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:var(--ink);
}
.connect-badge svg{width:22px;height:22px;fill:#fff}
.connect-row.connect-email .connect-badge{background:var(--red)}
.connect-row.connect-facebook .connect-badge{background:#1877f2}
.connect-row.connect-instagram .connect-badge{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.connect-row.connect-linkedin .connect-badge{background:#0a66c2}
.connect-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.connect-label{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.connect-value{font-size:16px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.connect-row a:hover .connect-value{color:var(--red)}
/* Featured campaign Page row: inverted colours (blue card, white badge with blue glyph) and a
   little more height so it leads the list; hover lifts like the others but keeps the blue. */
.connect-featured a{background:#1877f2;padding:16px 16px;box-shadow:0 8px 22px rgba(24,119,242,.28)}
.connect-featured a:hover{background:#1466d6;box-shadow:0 12px 28px rgba(24,119,242,.36)}
.connect-row.connect-featured .connect-badge{background:#fff;width:48px;height:48px}
.connect-row.connect-featured .connect-badge svg{fill:#1877f2;width:26px;height:26px}
.connect-row.connect-featured .connect-label{color:#fff;font-size:15px;font-weight:900;letter-spacing:.8px}
.connect-featured .connect-value{color:#fff;font-size:18px}
.connect-featured a:hover .connect-value{color:#fff}
/* "Personal contacts" divider: small caps label with a hairline either side, sits between the
   featured Page row and the four personal rows. */
.connect-divider{display:flex;align-items:center;gap:12px;margin:8px 0 2px;
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.connect-divider::before,.connect-divider::after{content:"";flex:1;height:1px;background:#dedede}
/* Big email (2026-09-11, client: "info@ nejako veľké"). One link, label above, address large
   and red with the mail glyph; wraps on narrow panels thanks to overflow-wrap. */
.connect-email-big{display:block;margin-top:26px;text-align:center}
.connect-email-label{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.connect-email-address{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head,Arial,Helvetica,sans-serif);
  font-size:30px;font-weight:900;letter-spacing:-.3px;color:var(--red);
  overflow-wrap:anywhere;line-height:1.1;
}
.connect-email-icon{width:30px;height:30px;flex:0 0 auto;display:inline-grid;place-items:center}
.connect-email-icon svg{width:100%;height:100%;fill:currentColor}
.connect-email-big:hover .connect-email-address{color:#a00609}

/* Public meetings (2026-09-16): a grey row like the Page row, then two lines of small copy.
   The row itself is styled by .connect-row/.connect-badge above; only the spacing is new. */
.connect-list-meet{margin-top:10px}
/* 2026-09-17 (client): same grey card as the rows, not a link. */
.connect-meet-card{margin-top:10px;padding:12px 14px;border-radius:14px;background:#f6f6f3}
.connect-meet-note{margin:0;font-size:14px;color:#555;line-height:1.45}
.connect-meet-note a{color:var(--red);font-weight:800;white-space:nowrap}
.connect-meet-note a:hover{text-decoration:underline}
/* The RMOW's turnout call: quoted, italic, muted, source inline — a note, not a slogan. */
.connect-meet-quote{margin:6px 0 0;font-size:13px;font-style:italic;color:var(--muted);line-height:1.45}
.connect-meet-quote cite{font-style:normal}
.connect-meet-quote cite a{color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.connect-meet-quote cite a:hover{color:var(--red)}
@media(max-width:780px){
  .connect-email-address{font-size:24px}
  .connect-email-icon{width:24px;height:24px}
}
@media(max-width:470px){
  .connect-email-address{font-size:20px}
}

/* Motto under the rows: divider + one bold centred line, same voice as the quotes elsewhere. */
.connect-motto{margin-top:30px;text-align:center}
.connect-motto .title-rule{margin-bottom:14px;max-width:240px}
.connect-motto p{
  margin:0;
  font-family:var(--font-head,Arial,Helvetica,sans-serif);
  font-size:22px;font-weight:900;line-height:1.3;text-transform:uppercase;letter-spacing:.3px;
  color:var(--ink);
}
@media(max-width:780px){
  .connect-motto{margin-top:24px}
  .connect-motto .title-rule{max-width:200px}
  .connect-motto p{font-size:18px}
}
/* Row classes are prefixed (connect-facebook, not facebook): style.css paints a background on
   bare .facebook/.instagram/.linkedin for the footer badges, and it leaked as a coloured strip
   behind the rows. Without the photo the panel no longer has anything to fill the height the
   form dictates, so it stops stretching and sits as a card of its own height. */
.panel-connect{align-self:start}
@media(max-width:780px){
  .connect-row a{padding:10px 12px;gap:12px}
  .connect-badge{width:38px;height:38px}
  .connect-badge svg{width:20px;height:20px}
  .connect-value{font-size:15px}
}

/* The two panels are grid items in .form-grid, so both are stretched to the taller one's height —
   and the form is much taller than four contact lines, which left ~450px of empty white under
   "Let's Connect". Making the panel a flex column lets the photo claim exactly that space
   (flex:1 on the figure) instead of it being dead. */
.panel-connect{display:flex;flex-direction:column}

/* margin-top:auto, not flex:1 — the difference matters. flex:1 makes the figure absorb whatever
   space is left and then clips the portrait against the panel's bottom edge when there isn't
   enough (the form panel is ~796px tall, the contact lines end around 380px, and a 300px-wide
   cut-out is 370px tall — it does not fit in what remains). auto margin pushes the photo to the
   bottom when there IS room and simply lets the panel grow when there isn't, so the portrait is
   never cut through the middle. Both panels are grid items, so the other one follows the height. */
.connect-photo{
  margin:24px 0 0 auto;
  display:block;
  width:min(370px,88%);
}
.panel-connect .connect-photo{margin-top:auto}
/* No border, no shadow, no radius on purpose. The photo's own background has been lifted almost
   to white, so its edges already melt into the white panel — framing it would put back exactly
   the box the treatment is there to remove. The mask softens the two edges that still show a
   seams: all four edges fade, so the frame has no line anywhere — the picture simply thins out
   into the card. Two gradients intersected (mask-composite), one per axis. */
.connect-photo img{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 9%,#000 78%,rgba(0,0,0,0) 100%),
                     linear-gradient(to right,rgba(0,0,0,0) 0%,#000 11%,#000 86%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 9%,#000 78%,rgba(0,0,0,0) 100%),
                     linear-gradient(to right,rgba(0,0,0,0) 0%,#000 11%,#000 86%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}

@media(max-width:780px){
  /* Stacked, the panel is only as tall as its content, so there is nothing to push against —
     the photo just follows the notice, centred, the way Get Involved behaves at this width. */
  .connect-photo{width:min(240px,60%);margin:18px auto 0}
  .panel-connect .connect-photo{margin-top:18px}
}
@media(max-width:470px){
  .connect-photo{width:min(200px,58%)}
}

/* PIPA notice under the contact-form heading (task 17). */
.form-privacy-note{font-size:13px;line-height:1.5;color:var(--muted);margin:-6px 0 16px}
.form-privacy-note a{color:var(--red);font-weight:800}

/* /contact page (2026-09-11): the home panel alone, centred, no form column. */
.connect-single{grid-template-columns:1fr;max-width:760px;margin:0 auto}