/*
  Arrotonda global typography scale.
  This file owns text sizing tokens used by page modules.
*/

:root {
  --arr-font-micro: 10px;
  --arr-font-dot: 5px;
  --arr-font-xs: 11px;
  --arr-font-meta: 12px;
  --arr-font-small: 13px;
  --arr-font-ui: 14px;
  --arr-font-control: 15px;
  --arr-font-body: 16px;
  --arr-font-card-title: 17px;
  --arr-font-subtitle: 18px;
  --arr-font-section-kicker: 20px;
  --arr-font-page-title: 32px;
  --arr-font-section-title: 36px;
  --arr-font-hero: clamp(56px, 4.65vw, 72px);
  --arr-font-display: 48px;
}

body,
button,
input,
select,
textarea {
  font-size: var(--arr-font-body);
}

.hp-form input,
.hp-form select,
.hp-form textarea,
.hp-button,
.button,
.elementor-button {
  font-size: var(--arr-font-control);
}

.hp-page__title,
.entry-title,
.page-title,
.arr-profile-mobile-title,
.arr-vendor-listings-title,
.arr-acc-title {
  font-size: var(--arr-font-page-title);
}

.hp-listing__title,
.hp-listing__title a,
.arr-card-title,
.arr-card-title a {
  font-size: var(--arr-font-card-title);
}

.hp-listing__details,
.hp-listing__attributes,
.hp-listing__categories,
.hp-listing__created-date,
.hp-listing__views,
.hp-vendor__details,
.hp-meta,
.arr-meta {
  font-size: var(--arr-font-meta);
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --arr-font-meta: 12.5px;
    --arr-font-small: 13px;
    --arr-font-ui: 14px;
    --arr-font-control: 15px;
    --arr-font-body: 15px;
    --arr-font-card-title: 16px;
    --arr-font-subtitle: 17px;
    --arr-font-section-kicker: 18px;
    --arr-font-page-title: 28px;
    --arr-font-section-title: 30px;
    --arr-font-hero: clamp(38px, 5vw, 48px);
    --arr-font-display: 42px;
  }
}

@media (max-width: 768px) {
  :root {
    --arr-font-micro: 9px;
    --arr-font-dot: 4px;
    --arr-font-xs: 11px;
    --arr-font-meta: 12px;
    --arr-font-small: 13px;
    --arr-font-ui: 14px;
    --arr-font-control: 15px;
    --arr-font-body: 15px;
    --arr-font-card-title: 16px;
    --arr-font-subtitle: 17px;
    --arr-font-section-kicker: 18px;
    --arr-font-page-title: 28px;
    --arr-font-section-title: 30px;
    --arr-font-hero: clamp(28px, 7.5vw, 36px);
    --arr-font-display: 36px;
  }

  body.blog .post--archive .post__header--cover .post__title a {
    display: block !important;
  }

}

/* ───────────────────────────────────────────────────────────────
   Blog — card archivio con cover: categoria più piccola, titolo
   in basso, testo che non ricopre tutta la foto (mobile + tablet).
   Mantiene il layout overlay del tema padre (categoria in alto in
   absolute, titolo in basso in absolute) e rinforza solo il
   gradiente-maschera già presente sulla foto.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Maschera trasparente direttamente sulla foto: sfuma verso il basso */
  body.blog .post--archive .post__header--cover .post__image a::after {
    background-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.12) 45%,
      rgba(0,0,0,0.62) 100%
    ) !important;
  }

  /* Categoria più piccola, resta in alto (absolute del tema padre) */
  body.blog .post--archive .post__header--cover .post__categories {
    padding: 16px 16px 0 !important;
  }

  body.blog .post--archive .post__header--cover .post__categories a {
    font-size: 9.5px !important;
    letter-spacing: 1px !important;
    padding: 0.28rem 0.6rem !important;
  }

  /* Titolo in basso, ridotto e limitato a 3 righe per non coprire la foto */
  body.blog .post--archive .post__header--cover .post__title {
    padding: 0 16px 16px !important;
    font-size: clamp(17px, 4.6vw, 21px) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  body.blog .post--archive .post__header--cover .post__title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  :root {
    --arr-font-page-title: 26px;
    --arr-font-section-title: 28px;
    --arr-font-hero: clamp(27px, 7.4vw, 32px);
  }
}