/*
Theme Name: SeiSoddisfatto Articoli
Theme URI: https://seisoddisfatto.com/
Description: Tema figlio di SeiSoddisfatto con archivio degli articoli.
Author: Satisfactory S.r.l.
Template: seisoddisfatto
Version: 1.2.0
Text Domain: seisoddisfatto-articoli
*/

.ss-articles {
  background: #fff;
  color: #202b3a;
  min-height: 65vh;
  padding: clamp(48px, 7vw, 112px) 24px;
}

.ss-articles .ss-articles__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ss-articles__eyebrow {
  color: #1c63aa;
  font: 800 13px/1.4 Nunito, sans-serif;
  letter-spacing: .12em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.ss-articles__title {
  color: #172a49;
  font: 800 clamp(38px, 5vw, 64px)/1.12 Nunito, sans-serif;
  margin: 0 0 20px;
}

.ss-articles__intro {
  color: #536273;
  font: 400 clamp(16px, 1.5vw, 19px)/1.65 Rubik, sans-serif;
  max-width: 720px;
  margin: 0 0 clamp(38px, 5vw, 66px);
}

.ss-articles .ss-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.ss-articles .ss-articles__card {
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15, 42, 77, .06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.ss-articles__card:hover,
.ss-articles__card:focus-within {
  box-shadow: 0 18px 42px rgba(15, 42, 77, .12);
  transform: translateY(-3px);
}

.ss-articles .ss-articles__image {
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  background: #f3f7fb;
}

.ss-articles .ss-articles__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.ss-articles__card:hover .ss-articles__image img { transform: scale(1.04); }

.ss-articles__image--plain {
  align-items: center;
  background: linear-gradient(135deg, #e9f3ff 0%, #fff7d8 100%);
  color: #1c63aa;
  display: flex;
  font: 800 34px/1 Nunito, sans-serif;
  justify-content: center;
}

.ss-articles .ss-articles__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 27px;
}

.ss-articles__date {
  color: #607487;
  font: 700 13px/1.4 Nunito, sans-serif;
  margin-bottom: 12px;
}

.ss-articles__card-title {
  color: #172a49;
  font: 800 23px/1.27 Nunito, sans-serif;
  margin: 0 0 16px;
}

.ss-articles__card-title a { color: inherit; text-decoration: none; }
.ss-articles__card-title a:hover,
.ss-articles__card-title a:focus { color: #1c63aa; }

.ss-articles__excerpt {
  color: #536273;
  font: 400 15px/1.65 Rubik, sans-serif;
  margin: 0 0 24px;
}

.ss-articles__more {
  align-self: flex-start;
  color: #165b9d;
  font: 800 15px/1.4 Nunito, sans-serif;
  margin-top: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ss-articles__more:hover,
.ss-articles__more:focus { color: #0d3f72; }

.ss-articles__pagination {
  margin-top: 52px;
  text-align: center;
}

.ss-articles__pagination .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.ss-articles__pagination .page-numbers {
  border: 1px solid #d7e2ed;
  border-radius: 8px;
  color: #165b9d;
  display: inline-block;
  font: 700 15px/1.3 Nunito, sans-serif;
  min-width: 42px;
  padding: 10px 13px;
  text-decoration: none;
}

.ss-articles__pagination .page-numbers.current,
.ss-articles__pagination .page-numbers:hover,
.ss-articles__pagination .page-numbers:focus {
  background: #165b9d;
  border-color: #165b9d;
  color: #fff;
}

@media (max-width: 900px) {
  .ss-articles .ss-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ss-articles { padding: 48px 20px 68px; }
  .ss-articles .ss-articles__grid { grid-template-columns: 1fr; gap: 20px; }
  .ss-articles .ss-articles__body { padding: 22px; }
  .ss-articles__card-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-articles__card, .ss-articles__image img { transition: none; }
  .ss-articles__card:hover, .ss-articles__card:focus-within { transform: none; }
}

/* Reserve the homepage video space before its metadata loads. */
.home #hero video {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 768;
}

/* Keep responsive case-history logos in their original proportions. */
#testimonials article div img.testimonial_logo { height: auto; max-width: 100%; }

/* Compact the layout and fixed controls on small phones. */
@media (max-width: 639px) {
  .wpcf7-form input, .wpcf7-form textarea { box-sizing: border-box; max-width: 100%; }
  .home #hero > div > div { padding-left: 20px; padding-right: 20px; }
  .home #primaryContent article figure, .home #primaryContent article > div { padding-left: 20px; padding-right: 20px; }
  .home #primaryContent article h2 { font-size: 28px; line-height: 1.2; }
  .home #primaryContent article p { font-size: 17px; line-height: 1.55; }
  .home #hero p:not(.cta) { font-size: 17px; line-height: 1.55; }
  .home #hero h1 { font-size: clamp(26px, 7vw, 32px); line-height: 1.2; margin: 24px 0; }
  .home #hero h1 strong { font-size: clamp(32px, 8.5vw, 40px); line-height: 1.08; }
  header[role="banner"].scrolled #branding { margin-top: 0; }
  footer #location .contacts p.fcta .mobile > span:first-child {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  footer #location .contacts p.fcta .mobile > span:nth-child(2) { width: 48px; height: 48px; }
}

/* Decorative hero images must stay inside phone and tablet viewports. */
@media (max-width: 1023px) {
  #hero figure img { right: 0; max-width: 100%; }
}