/*
 * FD AIdeas: fd-progetto-hero. Moved from Elementor Custom CSS on 2026-09-14, rules unchanged.
 * Selectors are the ones Elementor generated for each element, so specificity is the same as before.
 * Loaded by hello_elementor_child_fd_assets() in functions.php (group: progetto).
 */

/* fd-progetto-hero (container, class: fd-progetto__hero fd-focus-light), Elementor document 279 "FD Progetto (singolo)". selector = .elementor-279 .elementor-element.elementor-element-fd-progetto-hero */
/* Hero: soft petrolio wash (native gradient) plus a faint static contour pattern. */
.elementor-279 .elementor-element.elementor-element-fd-progetto-hero { position: relative; isolation: isolate; }
.elementor-279 .elementor-element.elementor-element-fd-progetto-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("https://workingfor.fdaideas.com/wp-content/uploads/2026/09/fd-pattern-contour.svg");
  background-repeat: repeat;
  background-size: 720px 720px;
  background-position: center -120px;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 85%);
}
.elementor-279 .elementor-element.elementor-element-fd-progetto-hero .fd-progetto__lead .elementor-heading-title { text-wrap: balance; }
@media (max-width: 809px) {
  .elementor-279 .elementor-element.elementor-element-fd-progetto-hero::before { background-size: 480px 480px; }
  .elementor-279 .elementor-element.elementor-element-fd-progetto-hero .fd-progetto__heading { --column-gap: 8px; }
}

/* fd-progetto-hero-enfasi (heading, class: fd-progetto__title-em), Elementor document 279 "FD Progetto (singolo)". selector = .elementor-279 .elementor-element.elementor-element-fd-progetto-hero-enfasi */
.elementor-279 .elementor-element.elementor-element-fd-progetto-hero-enfasi .elementor-heading-title { font-style: italic; }

/* a909b04 (post-info, class: fd-progetto__servizi), Elementor document 279 "FD Progetto (singolo)". selector = .elementor-279 .elementor-element.elementor-element-a909b04 */
/*
 * fd-progetto__servizi: native Post Info, one Terms item (taxonomy Servizi, link off, no icon).
 * Each .elementor-post-info__terms-list-item is one fd-progetto__servizio pill with the same look as
 * fd-progetto__chip (eyebrow global, white, hairline, radius 999, 8px gap). Post Info prints ", "
 * between terms: font-size 0 on the list collapses it. No terms = no pills = row hidden.
 */
.elementor-279 .elementor-element.elementor-element-a909b04 .elementor-post-info { margin: 0; padding: 0; }
.elementor-279 .elementor-element.elementor-element-a909b04 .elementor-post-info .elementor-icon-list-item,
.elementor-279 .elementor-element.elementor-element-a909b04 .elementor-post-info .elementor-icon-list-text { margin: 0; padding: 0; }
.elementor-279 .elementor-element.elementor-element-a909b04 .elementor-post-info .elementor-icon-list-item::after { display: none; }
.elementor-279 .elementor-element.elementor-element-a909b04 .elementor-post-info__terms-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -4px;
  font-size: 0;
  line-height: 0;
}
.elementor-279 .elementor-element.elementor-element-a909b04 .elementor-post-info__terms-list-item {
  display: inline-block;
  margin: 4px;
  padding: 7px 14px;
  font-size: var(--e-global-typography-eyebrow-font-size);
  /* Same height as fd-progetto__chip: those sit on the body text line box (text size x 1.6). */
  line-height: calc(var(--e-global-typography-text-font-size) * 1.6);
  color: var(--e-global-color-soft);
  background-color: var(--e-global-color-white);
  border: 1px solid var(--e-global-color-line);
  border-radius: 999px;
  white-space: nowrap;
}
.elementor-279 .elementor-element.elementor-element-a909b04:not(:has(.elementor-post-info__terms-list-item)) { display: none; }

/* fd-progetto-showcase (container, class: fd-progetto__showcase), Elementor document 279 "FD Progetto (singolo)". selector = .elementor-279 .elementor-element.elementor-element-fd-progetto-showcase */
/*
 * Showcase: desktop mockup in the Esempi frame; the phone stays in the flow and is pulled up
 * over the bottom-right corner with a negative margin (no absolute positioning, nothing clipped).
 * Phone height is about 2x its width, so the overlap scales with the same clamp.
 */
.elementor-279 .elementor-element.elementor-element-fd-progetto-showcase { --fd-phone-w: clamp(170px, 17vw, 220px); }
.elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--desktop img { display: block; width: 100%; height: auto; }
.elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--phone {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: var(--fd-phone-w);
  max-width: var(--fd-phone-w);
  margin: calc(var(--fd-phone-w) * -1.55) 48px 0 0;
}
.elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--phone .elementor-widget-image { line-height: 0; }
.elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--phone img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 18;
  height: auto;
  object-fit: cover;
  object-position: left top;
}
@media (max-width: 1024px) {
  .elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--phone { margin-right: 24px; }
}
@media (max-width: 809px) {
  .elementor-279 .elementor-element.elementor-element-fd-progetto-showcase { --fd-phone-w: 44vw; }
  .elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--phone {
    max-width: 180px;
    margin: -40px 16px 0 auto;
    border-radius: 22px;
  }
  .elementor-279 .elementor-element.elementor-element-fd-progetto-showcase .fd-progetto__frame--phone img { border-radius: 16px; }
}
