/* ==========================================================================
   Contatti — stili delle sezioni
   Ordine: due colonne (canali / dove siamo) · gallery dello studio.
   L'hero di pagina vive in components.css (riusabile).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Due colonne
   -------------------------------------------------------------------------- */

.argo-ctmain__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: start;
}
.argo-ctmain__col { display: flex; flex-direction: column; gap: 22px; }
.argo-ctmain__title { margin-bottom: 2px; }

/* Card dei canali di contatto. */
.argo-ctcard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 34px 32px 36px; }
.argo-ctcard__title { margin-top: 2px; }
.argo-ctcard__title--gold { color: var(--c-gold); }
.argo-ctcard__desc { font-size: var(--fs-small); line-height: 1.7; text-wrap: pretty; }
.argo-card--dark .argo-ctcard__desc { color: var(--c-on-dark); }
.argo-ctcard .argo-btn { margin-top: 8px; }

/* Stato "online" con pallino lampeggiante. */
.argo-ctcard__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.argo-ctcard__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: argoBlink 2.4s ease-in-out infinite;
}
.argo-ctcard__dash { top: -50px; right: -40px; width: 170px; height: 170px; }

/* Card studio: foto + indirizzo + link a Maps. */
.argo-ctmap { border-radius: 28px 28px 28px var(--r-sharp); }
.argo-ctmap__img { width: 100%; height: 230px; object-fit: cover; }
.argo-ctmap__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 30px 30px; }
.argo-ctmap__addr { font-size: var(--fs-small); line-height: 1.6; color: var(--c-text); }
.argo-ctmap__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--c-text-strong);
}

/* Sessione gratuita: fondo caldo e fascio oro. */
.argo-ctsession { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 30px 34px; }
.argo-ctsession__desc { font-size: var(--fs-small); line-height: 1.7; color: #6d6041; }
.argo-ctsession .argo-btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   2. Gallery dello studio
   -------------------------------------------------------------------------- */

.argo-ctgallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.argo-ctgallery__item { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); }
.argo-ctgallery__item--first { border-radius: 22px 22px 22px var(--r-sharp); }
.argo-ctgallery__item--last { border-radius: 22px 22px var(--r-sharp) 22px; }
.argo-ctgallery__item--offset { margin-top: 26px; }
.argo-ctgallery__img { width: 100%; height: 240px; object-fit: cover; }

/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .argo-ctmain__inner { grid-template-columns: 1fr; gap: 34px; }
  .argo-ctgallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .argo-ctcard { padding: 28px 24px 30px; }
  .argo-ctcard__dash { display: none; }
  .argo-ctmap__info { padding: 22px 24px 26px; }
  .argo-ctgallery__grid { grid-template-columns: 1fr; }
  .argo-ctgallery__item--offset { margin-top: 0; }
}