/* Fattoria Blog — Figma 2230:9 (desktop) and 2230:219 (mobile).
 * Shared template styles are in main.css; these are the brand/design differences.
 */
:root {
  --color-primary: #7209b7;
  --color-button-background: #7209b7;
  --color-accent: #f72585;
  --color-hero-title: #fff;
  --color-hero-text: #fff;
  --color-hero-dot: #d9d9d9;
  --color-hero-dot-active: var(--color-primary);
  --color-most-read-background: #14141e;
  --color-most-read-text: #fff;
  --color-most-read-number: #7209b7;
  --color-most-read-link: #dda7ff;
  --color-newsletter-background: #242530;
}
.wp-site-blocks { padding: 0; }
[hidden] { display: none !important; }
.blog-brand { display: inline-flex; line-height: 0; }
.blog-brand__desktop, .blog-brand__footer { display: inline-flex; gap: 12.17px; align-items: center; }
.blog-brand__mobile { display: none; gap: 8.113px; align-items: center; }
.blog-brand img { flex: none; max-width: none; }
.header { height: 99px; }
.hero { background: #14141e; overflow: hidden; }
.hero__decoration { position: absolute; width: 1691.04px; height: 1209.68px; left: calc(50% - 600.21px); top: -250px; pointer-events: none; transform: rotate(-4.41deg); }
.hero__decoration img { display: block; max-width: none; }
.hero__inner { position: relative; z-index: 1; min-height: 572px; padding-block: 80px; }
.hero__visual { min-width: 0; }
.hero__content { position: relative; }
.hero__title { max-width: 400px; }
.hero__excerpt { letter-spacing: -.05em; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.hero__tags a { letter-spacing: -.07em; }
.hero .button--outline { color: #f3f3f3; background: #7209b7; border: 1px solid transparent; }
.hero .button--outline:hover { background: #5f069a; transform: none; }
.hero__pagination img { max-width: none; }
.hero__pagination button { width: 10px; height: 10px; display: grid; place-items: center; transition: all ease .4s; }
.hero__pagination button span { transition: all ease .4s; }
.hero__pagination button[aria-current="false"] { opacity: .65; }
.hero__pagination button:hover { opacity: 1; }
.ft-js .hero--has-arrows .hero__inner { width: min(calc(100% - 248px), 1232px); }
.hero__arrows { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 48px), 1432px); margin-inline: auto; pointer-events: none; }
.hero__arrow { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: #fff; background: var(--color-primary); border: 1px solid transparent; border-radius: 50%; cursor: pointer; pointer-events: auto; transition: background-color .18s ease; }
.hero__arrow:hover { background: color-mix(in srgb, var(--color-primary) 90%, white 10%); }
.hero__arrow:focus-visible { outline: 3px solid #dda7ff; outline-offset: 4px; }
.hero__arrow svg { display: block; }
@media (min-width: 768px) and (max-width: 1100px) {
  .ft-js .hero--has-arrows .hero__inner { width: calc(100% - 248px); }
}
@media (max-width: 767px) {
  .ft-js .hero--has-arrows .hero__inner { width: calc(100% - 48px); }
  .hero__arrows { top: auto; bottom: 30px; width: 160px; height: 44px; }
}
.article-search input::placeholder { color: #7209b7; font-weight: 700; }
.article-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 2 8 8M10 2l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 2 8 8M10 2l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
.topic-filter__link { background: #fdfcfc; border-color: #7209b7; }
.topic-filter__link.is-active { background: #7209b7; }
@media (min-width: 768px) { .topic-filter__link[data-topic="ai"], .topic-filter__link[data-topic="ia"] { display: none; } }
@media (min-width: 768px) {
  :root { --color-hero-dot: #ddd; }
  .hero__pagination button[aria-current="false"] { opacity: 1; }
  .hero__pagination img { display: none; }
}
.post-card__excerpt { -webkit-line-clamp: unset; }
.most-read { min-height: 303px; }
.most-read h2 { line-height: 40px; }
.popular-card__number { background: #7209b7; }
.newsletter { position: relative; overflow: hidden; background: #242530; }
.newsletter__illustration { position: absolute; left: calc(50% - 127px); top: 86px; max-width: none; pointer-events: none; }
.newsletter__inner { position: relative; z-index: 1; min-height: 494px; padding-block: 100px; }
.newsletter__title { max-width: 816px; font-size: 40px; line-height: 48px; }
.newsletter__note { width: min(608px, 100%); margin-inline: auto; font-size: 16px; }
.newsletter__form { width: min(705px, 100%); }
.newsletter__field input { display: block; width: 100%; min-height: 56px; padding: 12px 16px; color: #fff; border: 1px solid #fff; border-radius: 24px; font-family: "Raleway",sans-serif; }
.newsletter__field input::placeholder { color: #fff; opacity: 1; }
.newsletter__submit button { width: 100%; min-height: 56px; padding: 14px 24px; background: #fff; color: #18191b; border: none; border-radius: 24px; font: 600 18px/1.5 "Work Sans",sans-serif; cursor: pointer; transition: all ease .4s; }
.newsletter__submit button:hover { background: var(--color-primary); color: #fff; }
.newsletter__field input { background: rgb(255 255 255 / 20%); }
.newsletter__status { margin: 0; color: #fff; text-align: center; }
.blog-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.footer { min-height: 251px; }
.footer__top { min-height: 133px; }
.footer__divider { display: block; height: 1px; overflow: hidden; background: none; }
.footer__divider img { max-width: none; }
.footer__bottom { min-height: 118px; }
.footer__copyright { color: #150e06; }
.footer__social-list a, .social-unlinked { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: transparent; font: 700 16px/1.5 "Raleway",sans-serif; }
.social-background { position: absolute; inset: 0; max-width: none; }
.footer__social-list a > span, .social-unlinked > span { position: relative; z-index: 1; }
.articles__more[aria-busy="true"] { opacity: .65; cursor: wait; }
.blog-load-status { text-align: center; margin-top: 16px; }
@media (min-width: 1101px) {
  .most-read__grid { max-width: 1222px; column-gap: 26px; }
  .popular-card { position: relative; }
  .popular-card__link, .popular-card + .popular-card .popular-card__link { padding: 0; }
  .popular-card + .popular-card { border-left: 0; }
  .popular-card + .popular-card::before { position: absolute; top: 0; left: -14px; height: 103px; border-left: 1px solid #ddd; content: ""; }
  .popular-card .text-link { font-size: 16px; }
  .newsletter__title { margin-bottom: 8px; }
}
html:not(.ft-js) .header__toggle { display: none; }
html:not(.ft-js) .header__nav { position: static; visibility: visible; opacity: 1; transform: none; min-height: 0; width: auto; padding: 0; border: 0; }
html:not(.ft-js) .header__menu { flex-direction: row; gap: 12px; font-size: 12px; }
html:not(.ft-js) .header__menu > li:last-child > a { min-height: 40px; padding: 8px 12px; }
html:not(.ft-js) .article-search input { width: 100%; padding-left: 16px; opacity: 1; }

@media (max-width: 1100px) and (min-width: 768px) {
  .hero__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero__title { font-size: 40px; }
  .most-read h2 { font-family: "Work Sans", sans-serif; }
  .most-read__grid { gap: 16px; }
  .popular-card { container: most-read-card / inline-size; }
  .popular-card__link { grid-template-columns: 32px 104px minmax(0, 1fr); gap: 16px; padding: 0; }
  .popular-card__number { font-family: "Work Sans", sans-serif; }
  .popular-card__media { width: 104px; height: 103px; border-radius: 16px; }
  .popular-card__content { font-family: "Work Sans", sans-serif; }
  .popular-card .text-link { font-size: 16px; line-height: 1.5; }
}
/* Keep each title readable when three full horizontal cards no longer fit. */
@container most-read-card (max-width: 263px) {
  .popular-card__link { grid-template-columns: 32px minmax(0, 1fr); }
  .popular-card__content { grid-column: 2; }
}
@media (max-width: 767px) {
  .header { height: 72px; }
  .blog-brand__desktop { display: none; }
  .blog-brand__mobile { display: inline-flex; }
  .header__toggle { width: 44px; height: 44px; margin-right: -6px; }
  .hero { background: #14141e; }
  .hero__decoration { width: 1219.28px; height: 872.22px; left: -411px; top: -266px; transform: rotate(4.41deg) scaleY(-1); }
  .hero__inner { min-height: 0; gap: 24px; padding-block: 32px 48px; }
  .hero__visual { order: -1; width: 100%; }
  .hero__media { height: 200px; aspect-ratio: auto; }
  .hero__content { gap: 16px; }
  .hero__title { max-width: 260px; font-size: 32px; letter-spacing: -.07em; }
  .hero__excerpt { display: block; line-height: normal; }
  .hero .button { min-height: 51px; font: 700 16px/1.2 "Raleway",sans-serif; }
  .hero__pagination { position: static; order: 0; width: 100%; justify-content: center; margin-top: 32px; }
  .hero__pagination button { width: 8px; height: 8px; }
  .articles { padding-block: 32px; }
  .articles__heading { gap: 16px; margin-bottom: 24px; }
  .articles__grid { gap: 24px; }
  .post-card__link { gap: 16px; }
  .post-card__body { gap: 12px; font-family: "Roboto",sans-serif; }
  .post-card__media { height: 200px; aspect-ratio: auto; }
  .post-card__title { font-size: 20px; line-height: 1.3; }
  .post-card__meta { font-size: 14px; font-weight: 400; line-height: 16px; }
  .post-card__excerpt { font-size: 14px; line-height: 1.5; }
  .post-card .text-link { font-size: 14px; line-height: normal; }
  .topic-filter { gap: 8px; }
  .topic-filter__link { min-height: 40px; padding: 10px 16px; }
  .topic-filter__link[data-topic="ai"], .topic-filter__link[data-topic="ia"] { min-width: 79px; }
  .articles__more { min-height: 51px; margin-top: 24px; }
  .most-read { min-height: 0; padding-block: 32px; }
  .most-read h2 { font-size: 24px; line-height: normal; margin-bottom: 24px; }
  .most-read__grid { gap: 24px; }
  .popular-card__link { grid-template-columns: 32px 80px 1fr; gap: 16px; align-items: center; }
  .popular-card__number { width: 32px; height: 32px; border-radius: 4px; font: 700 12px/1.5 "Work Sans",sans-serif; letter-spacing: 1.2px; }
  .popular-card__media { width: 80px; height: 80px; border-radius: 12px; }
  .popular-card__link, .popular-card + .popular-card .popular-card__link { padding: 0; border-bottom: 0; }
  .popular-card__content { gap: 8px; }
  .popular-card__title { font: 700 16px/1.4 "Work Sans",sans-serif; }
  .popular-card .text-link { font: 700 14px/16px "Roboto",sans-serif; }
  .popular-card + .popular-card { padding-top: 24px; border-top: 1px solid #ddd; }
  .newsletter__illustration { display: none; }
  .newsletter__inner { min-height: 419px; padding-block: 48px; gap: 24px; }
  .newsletter__title { font-size: 24px; line-height: 1.2; }
  .newsletter__form { gap: 16px; }
  .newsletter__note { font-size: 14px; line-height: 1.4; }
  .footer { min-height: 347px; padding-block: 48px; }
  .footer .container { width: min(calc(100% - 32px), 1232px); }
  .footer__top, .footer__bottom { min-height: 0; }
  .footer__top { gap: 32px; }
  .footer__bottom { gap: 32px; margin-top: 32px; padding-top: 0; }
  .footer__brand { line-height: 0; }
  .footer__menu { font-family: "Raleway",sans-serif; line-height: normal; gap: 32px; }
  .footer__menu a { min-height: 0; }
  .footer__copyright { font-family: "Raleway",sans-serif; line-height: normal; }
  .footer__social-list { gap: 16px; }
  .footer__social-list a, .social-unlinked { font-size: 14px; }
  .footer__divider { width: 100%; height: 0; border: 0; overflow: visible; }
  .single-article__title { font-size: 32px; }
  html:not(.ft-js) .header__brand { display: none; }
  html:not(.ft-js) .header__menu a { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}