/* ============================================================
   pages.css — Stili specifici per le pagine interne
   Tema Mingardi · v1.0
   ============================================================ */

/* ============================================================
   PAGE INTRO — intestazione comune pagine interne
   ============================================================ */
.page-intro {
  padding: calc(var(--nav-h) + 32px) max(10px, 2.5vw) 28px;
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
}
.page-intro .section-title { margin-bottom: 16px; }
.page-intro-content {
  font-size: 1rem; color: var(--dark-gray);
  font-weight: 300; max-width: 660px; line-height: 1.75;
  margin-top: 12px;
}
.page-intro-content p + p { margin-top: 1em; }

/* ============================================================
   PAGINA EXPERTISE — stili aggiuntivi
   ============================================================ */
/* La .competenze-page non ha background off-white (già diversa dalla home) */
.competenze-page {
  background: var(--white);
}

/* ============================================================
   PAGINA PORTFOLIO — griglia 3 colonne (non drag-scroll)
   ============================================================ */
.portfolio-page { background: var(--off-white); }
.port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Card statica (pagina portfolio — non drag) */
.port-card-static {
  background: white; border: 1px solid var(--light-gray);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.port-card-static:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* port-thumb, port-body, port-client, port-desc, port-skills, port-skill
   sono già definiti in main.css e funzionano anche per .port-card-static */

.port-client a {
  color: var(--near-black); text-decoration: none;
  transition: color .2s;
}
.port-client a:hover { color: var(--teal); }

@media (max-width: 960px) {
  .port-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .port-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINA CHI SONO — layout due colonne
   ============================================================ */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--nav-h) max(10px, 2.5vw) 80px 0;
  align-items: start;
}
.about-main { padding-top: 32px; padding-left: 0px;}
.about-main .section-title { margin-bottom: 24px; }
.about-sidebar { padding-top: 64px; }
.about-content {
  font-size: 1rem; color: var(--dark-gray);
  font-weight: 300; line-height: 1.8;
}
.about-content p + p { margin-top: 1.2em; }
.about-content h2 {
  font-family: var(--serif); font-size: 1.5rem;
  margin: 2em 0 0.6em; color: var(--near-black);
}
.about-content a { color: var(--teal); }

/* Sidebar card */
.about-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.about-profile-card {
  background: white; border: 1px solid var(--light-gray);
  border-radius: 18px; padding: 26px;
  box-shadow: 0 4px 28px rgba(61,90,128,0.08);
}
.about-disponibilita {
  display: flex; align-items: center;
  background: var(--teal-pale); border-radius: 8px;
  padding: 10px 14px; margin-top: 16px;
  font-size: 0.8rem; color: var(--teal-dark); font-weight: 500;
}

@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-sidebar { position: static; }
}

/* ============================================================
   PAGINA CONTATTI
   ============================================================ */
.contact-section { background: var(--off-white); }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}
.contact-form-wrap { min-width: 0; }

.contact-info-title {
  font-family: var(--serif); font-size: 1.2rem;
  margin-bottom: 14px;
}
.contact-email-link {
  display: block;
  font-family: var(--mono); font-size: 1rem;
  color: var(--teal); text-decoration: none;
  margin-bottom: 16px;
  transition: color .2s;
}
.contact-email-link:hover { color: var(--teal-dark); }
.contact-sede {
  font-size: 0.9rem; color: var(--dark-gray);
  font-weight: 300; line-height: 1.7;
}

/* ---- Restyling form Contact Form 7 ---- */
.wpcf7-form label {
  display: block; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dark-gray); margin-bottom: 6px; margin-top: 18px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--light-gray);
  border-radius: 8px;
  font-family: var(--sans); font-size: 0.95rem;
  color: var(--near-black);
  background: white;
  transition: border-color .2s;
  outline: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { border-color: var(--teal); }
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form input[type="submit"] {
  margin-top: 20px;
  background: var(--teal); color: white;
  padding: 13px 30px; border-radius: 8px;
  border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  transition: background .2s, transform .15s;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--teal-dark); transform: translateY(-1px);
}
.wpcf7-response-output {
  margin-top: 16px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  border: none !important;
}
.wpcf7-mail-sent-ok  { background: var(--teal-pale)  !important; color: var(--teal-dark)  !important; }
.wpcf7-validation-errors { background: #fff4e5 !important; color: #8a5300 !important; }

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINA GENERICA (page.php)
   ============================================================ */
.page-generic { padding-top: calc(var(--nav-h) + 60px); }
.page-content {
  font-size: 1rem; color: var(--dark-gray);
  font-weight: 300; line-height: 1.8; max-width: 720px;
}
.page-content p + p { margin-top: 1em; }
.page-content a { color: var(--teal); }