/**
 * Kapcsolat oldal (page-templates/page-kapcsolat.php).
 * Elérhetőség-kártyák (.contact-grid/.ccard) + gyorslink-kártyák (.quick/.qcard);
 * a .hero/.head-center/.section a base.css-ből jön.
 */

/* — Elérhetőség-kártyák — */
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ccard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: .2s ease; color: inherit; }
a.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.ccard .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--grad-ink); color: #fff; display: grid; place-items: center; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(47,80,180,.22); }
.ccard .ic svg { width: 24px; height: 24px; }
.ccard .k { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--font-head); font-weight: 600; }
.ccard .v { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; } /* a törést a markup <wbr>-jei vezérlik */
.ccard .note { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* Hero: az "E-mail küldése" ghost-gomb körvonalat kap (a főoldali callout-gomb mintája) */
.hero .btn-ghost.outlined { border: 1.5px solid rgba(255,255,255,.65); border-radius: 12px; padding: 15px 26px; }
.hero .btn-ghost.outlined:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* — Gyorslink-szekció: arculati gradiens háttér, hogy elváljon az elérhetőségektől — */
.quick-sec { background: var(--grad-ink); }
.quick-sec .head-center h2 { color: #fff; }
.quick-sec::before { background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); width: 460px; height: 460px; right: -160px; top: -160px; }

/* — Gyorslink-kártyák — */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.qcard { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: .2s ease; color: inherit; }
.qcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.qcard .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(58,63,214,.08); color: var(--blue); display: grid; place-items: center; margin-bottom: 18px; }
.qcard .ic svg { width: 24px; height: 24px; }
.qcard h3 { font-size: 18px; margin: 0 0 10px; }
.qcard p { color: var(--muted); font-size: 15px; line-height: 1.55; flex: 1; }
.qcard .more { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--blue); }
.qcard .more svg { width: 17px; height: 17px; transition: .2s ease; }
.qcard:hover .more svg { transform: translateX(4px); }
@media (max-width: 900px) { .quick { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } }