/*
 * Blog statico. Layout card e griglie: classi Webflow già nel foglio condiviso
 * (collection-list-8, blog-post_card, grid-2-col, div-block-26, section-hero).
 * Qui solo gli aggiustamenti tipografici che ds-apply appiattisce, con i token esistenti.
 */

/* The prototype note sat above the navbar. Keep the skip link for keyboard only. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
}

.skip-link:focus {
  left: 0;
}

/* Webflow .grid-1-col is 1fr 1fr; the live hero spans it with a per-node rule that is not in the shared CSS. */
.blog-hero .grid-1-col,
.blog-article__hero .grid-1-col {
  grid-template-columns: 1fr;
}

/* The hero cell is a column flex with align-items: flex-start, so the title block sat on the left. */
.blog-hero .text-align-center,
.blog-hero .marta-hero-text_wrapper-copy {
  align-self: stretch;
  width: 100%;
  text-align: center;
}

.blog-hero .marta-hero-text_wrapper-copy {
  align-items: center;
}

.blog-hero .main-image_cell,
.blog-article__hero .main-image_cell,
.blog-hero .marta-hero-text_wrapper-copy,
.blog-article__hero .marta-hero-text_wrapper-copy,
.blog-hero h1,
.blog-article__hero h1 {
  width: 100%;
}

.blog-feature,
.blog-feature:hover,
.blog-feature:focus-visible {
  text-decoration: none;
  color: inherit;
}

.blog-feature__media img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-feature__copy {
  align-items: flex-start;
}

body[data-brand] .blog-feature__title {
  margin: 0;
  font-size: var(--text-title-large-size);
  line-height: var(--text-title-large-line-height);
  letter-spacing: var(--text-title-large-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-900);
}

.blog-feature__date {
  margin: 0;
  color: var(--color-gray-500);
}

.blog-feature .mkt-button {
  margin-top: var(--space-8);
}

.blog-post_card {
  height: 100%;
}

.blog-post_card .servizi-text_wrapper {
  margin-top: var(--space-16);
}

/* Same link as the live blog: semibold label + arrow, no underline. */
body[data-brand] a.blog-post-card_link,
body[data-brand] a.blog-post-card_link:hover,
body[data-brand] a.blog-post-card_link:focus-visible {
  text-decoration: none;
}

.blog-card__category {
  margin: 0;
  color: var(--color-pink-900);
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-medium);
  letter-spacing: var(--text-body-xsmall-letter-spacing);
}

body[data-brand] .blog-post_card h3 {
  margin: 0;
  font-size: var(--text-body-xlarge-size);
  line-height: var(--text-body-xlarge-line-height);
  letter-spacing: var(--text-body-xlarge-letter-spacing);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.blog-card__excerpt,
.blog-card__date {
  margin: 0;
}

.blog-card__date {
  color: var(--color-gray-500);
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-medium);
}

.blog-latest h2 {
  text-align: center;
}

.blog-article__hero .text-size-medium {
  margin-inline: auto;
}

body[data-brand] .blog-article__body h3 {
  margin: var(--space-32) 0 var(--space-8);
  font-size: var(--text-title-xsmall-size);
  line-height: var(--text-title-xsmall-line-height-regular);
  letter-spacing: var(--text-title-xsmall-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-900);
}

.blog-article__body p,
.blog-article__body li {
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
}

.blog-article__body p {
  margin: 0 0 var(--space-16);
}

.blog-article__body ol,
.blog-article__body ul {
  margin: 0 0 var(--space-16);
  padding-left: var(--space-24);
}

.blog-article__body li {
  margin-bottom: var(--space-8);
}

.blog-article__body a {
  color: var(--color-900);
}

@media (max-width: 991px) {
  .blog-feature__media {
    height: 36em;
  }

  .blog-feature__media img {
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 479px) {
  .blog-feature__media {
    height: 19em;
  }
}