/* ═══════════════════════════════════════════════
   ClickCasa — pages.css
   Stili condivisi per le pagine interne
   ═══════════════════════════════════════════════ */

/* ─── Page Hero (interno) ─── */
.page-hero {
  background: linear-gradient(135deg, var(--cc-blue) 0%, #1E3550 60%, #253D30 100%);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(107,143,113,.18) 0%, transparent 65%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
  pointer-events: none;
}
.page-hero .breadcrumb-item { color: rgba(255,255,255,.45); }
.page-hero .breadcrumb-item a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.page-hero .breadcrumb-item a:hover { color: rgba(255,255,255,.9); }
.page-hero .breadcrumb-item.active { color: rgba(255,255,255,.75); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.25); }
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.page-hero .lead { color: rgba(255,255,255,.65); max-width: 580px; font-size: 1.05rem; font-weight: 300; }
.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(107,143,113,.2);
  border: 1px solid rgba(107,143,113,.3);
  border-radius: 100px;
  padding: .28rem .85rem;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  letter-spacing: .05em;
  margin-bottom: 1.2rem;
}

/* ─── Content Sections ─── */
.content-section { padding: 5rem 0; }
.content-section-sm { padding: 3.5rem 0; }

/* ─── Info Card ─── */
.info-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
    height: auto;
  transition: box-shadow .25s, transform .25s;
}
.info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.info-card-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.info-card-icon.sage  { background: var(--cc-sage-light);  color: var(--cc-sage-dark); }
.info-card-icon.blue  { background: var(--cc-blue-light);  color: var(--cc-blue); }
.info-card-icon.amber { background: var(--cc-amber-light); color: var(--cc-amber); }

/* ─── Timeline ─── */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: .9rem;
  top: .5rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--cc-sage), var(--cc-blue));
  opacity: .25;
}
.timeline-item { position: relative; padding-bottom: 2.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -2.5rem;
  top: .15rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cc-sage);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--cc-sage);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-body);
}
.timeline-item h3 { font-size: 1.1rem; color: var(--cc-ink); margin-bottom: .4rem; }
.timeline-item p  { font-size: .9rem; color: var(--cc-muted); line-height: 1.7; margin: 0; }

/* ─── Team Card ─── */
.team-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s;
}
.team-card:hover { box-shadow: var(--shadow-md); }
.team-card-avatar {
  background: linear-gradient(135deg, var(--cc-sage-light), var(--cc-blue-light));
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: var(--cc-muted);
}
.team-card-body { padding: 1.5rem; }
.team-card-body h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.team-card-role { font-size: .82rem; color: var(--cc-sage); font-weight: 500; margin-bottom: .75rem; }
.team-card-body p { font-size: .85rem; color: var(--cc-muted); margin: 0; line-height: 1.65; }

/* ─── Contatti ─── */
.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s;
}
.contact-method:hover { box-shadow: var(--shadow-md); }
.contact-method-icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.contact-method-icon.sage  { background: var(--cc-sage-light);  color: var(--cc-sage); }
.contact-method-icon.blue  { background: var(--cc-blue-light);  color: var(--cc-blue); }
.contact-method-icon.amber { background: var(--cc-amber-light); color: var(--cc-amber); }
.contact-method h4 { font-size: .95rem; margin-bottom: .25rem; }
.contact-method p  { font-size: .85rem; color: var(--cc-muted); margin: 0; }
.contact-method a  { font-size: 1rem; font-weight: 500; color: var(--cc-ink); text-decoration: none; }
.contact-method a:hover { color: var(--cc-sage); }

/* ─── Map placeholder ─── */
.map-placeholder {
  background: linear-gradient(135deg, var(--cc-sage-light), var(--cc-blue-light));
  border-radius: var(--radius-lg);
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cc-muted);
  border: 1px solid var(--cc-border);
  font-size: .9rem;
  gap: .75rem;
}
.map-placeholder i { font-size: 3rem; color: var(--cc-sage); }

/* ─── Localita ─── */
.region-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all .25s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.region-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--cc-sage);
  color: inherit;
}
.region-card-top {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--cc-border);
  background: linear-gradient(135deg, var(--cc-sage-light) 0%, #fff 100%);
}
.region-card-top h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.region-card-body { padding: 1.2rem 1.5rem; }
.province-pill {
  display: inline-block;
  background: var(--cc-sage-light);
  color: var(--cc-sage-dark);
  border-radius: 100px;
  padding: .2rem .65rem;
  font-size: .75rem;
  font-weight: 500;
  margin: .15rem;
}

/* ─── Blog ─── */
.blog-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all .25s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.blog-card-thumb {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
  overflow: hidden;
}
.blog-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-category {
  display: inline-block;
  border-radius: 100px;
  padding: .22rem .75rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.blog-category.successione { background: var(--cc-sage-light);  color: var(--cc-sage-dark); }
.blog-category.terreni     { background: var(--cc-amber-light); color: #9A6E1A; }
.blog-category.guide       { background: var(--cc-blue-light);  color: var(--cc-blue); }
.blog-card h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: .6rem; }
.blog-card p  { font-size: .875rem; color: var(--cc-muted); line-height: 1.65; flex: 1; }
.blog-meta { font-size: .78rem; color: var(--cc-muted); display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cc-border); }
.blog-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.blog-card-link:hover { color: inherit; }

/* ─── Articolo singolo ─── */
.article-body {
  font-size: 1rem;
  line-height: 1.85;
  color: #2D3748;
}
.article-body h2 {
  font-size: 1.55rem;
  color: var(--cc-ink);
  margin-top: 2.8rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--cc-sage-light);
}
.article-body h3 {
  font-size: 1.2rem;
  color: var(--cc-ink);
  margin-top: 2rem;
  margin-bottom: .75rem;
}
.article-body p { margin-bottom: 1.3rem; }
.article-body ul, .article-body ol {
  margin-bottom: 1.3rem;
  padding-left: 1.5rem;
}
.article-body li { margin-bottom: .5rem; }
.article-body strong { color: var(--cc-ink); }
.article-body .highlight-box {
  background: var(--cc-sage-light);
  border-left: 4px solid var(--cc-sage);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.2rem 1.5rem;
  margin: 1.8rem 0;
}
.article-body .warning-box {
  background: var(--cc-amber-light);
  border-left: 4px solid var(--cc-amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.2rem 1.5rem;
  margin: 1.8rem 0;
}
.article-body .highlight-box p,
.article-body .warning-box p { margin: 0; font-size: .92rem; }

.article-toc {
  background: var(--cc-warm);
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.article-toc h4 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--cc-ink);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-body);
}
.article-toc ol {
  margin: 0;
  padding-left: 1.2rem;
}
.article-toc li { margin-bottom: .35rem; font-size: .88rem; }
.article-toc a { color: var(--cc-sage-dark); }
.article-toc a:hover { color: var(--cc-blue); }

.article-sidebar-cta {
  background: linear-gradient(160deg, var(--cc-blue) 0%, #1E3550 100%);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  color: #fff;
  position: static !important;
}




.article-sidebar-cta h3 { font-size: 1.2rem; color: #fff; margin-bottom: .75rem; }
.article-sidebar-cta p  { font-size: .87rem; color: rgba(255,255,255,.65); margin-bottom: 1.3rem; }

.article-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--cc-warm);
  border-radius: var(--radius-md);
  margin-top: 2.5rem;
}
.author-avatar {
  width: 56px; height: 56px; min-width: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cc-sage-light), var(--cc-blue-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--cc-muted);
}
.author-info h5 { font-size: .95rem; margin-bottom: .15rem; }
.author-info p  { font-size: .82rem; color: var(--cc-muted); margin: 0; }

/* ─── Tag filter ─── */
.filter-btn {
  border-radius: 100px;
  padding: .4rem 1.1rem;
  font-size: .83rem;
  font-weight: 500;
  border: 1.5px solid var(--cc-border);
  background: #fff;
  color: var(--cc-muted);
  cursor: pointer;
  transition: all .2s;
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--cc-sage);
  background: var(--cc-sage-light);
  color: var(--cc-sage-dark);
}

/* ─── Stat highlight ─── */
.stat-highlight {
  text-align: center;
  padding: 1.5rem;
}
.stat-highlight .num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--cc-sage);
  line-height: 1;
}
.stat-highlight .label {
  font-size: .83rem;
  color: var(--cc-muted);
  margin-top: .4rem;
}