/* ==========================================================================
   Do You Rome · Desktop mega menu
   ========================================================================== */

@media (min-width: 1025px) {
  .dyr-main-menu .menu-item-39 > .sub-menu,
  .dyr-main-menu .menu-item-40 > .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.dyr-mega-open {
    overflow-x: hidden;
  }

  body.dyr-mega-open .elementor-location-header .elementor-element-7a4fb92 {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  .dyr-mega-layer {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    visibility: hidden;
  }

  .dyr-mega-layer.is-open {
    visibility: visible;
  }

  .dyr-mega-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--dyr-mega-top, 0px);
    bottom: 0;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(16, 14, 12, .40) !important;
    box-shadow: none !important;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
  }

  .dyr-mega-overlay:hover,
  .dyr-mega-overlay:focus,
  .dyr-mega-overlay:active {
    background: rgba(16, 14, 12, .40) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
  }

  .dyr-mega-layer.is-open .dyr-mega-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .dyr-mega-panel {
    position: fixed;
    top: var(--dyr-mega-top, 0px);
    left: 50%;
    width: min(920px, calc(100vw - 48px));
    min-height: 314px;
    transform: translate(-50%, 8px);
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(430px, 1.22fr);
    gap: 20px;
    padding: 20px;
    border: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(18, 15, 12, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .18s ease, visibility .16s ease;
  }

  .dyr-mega-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }

  .dyr-mega-panel__nav {
    min-width: 0;
    padding: 2px 20px 2px 0;
    border-right: 1px solid rgba(32, 32, 32, .06);
  }

  .dyr-mega-panel__title {
    margin: 0 0 8px;
    color: #202020;
    font-family: var(--e-global-typography-primary-font-family), "Hedvig Letters Serif", serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.15;
  }

  .dyr-mega-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .dyr-mega-panel__item {
    margin: 0;
    padding: 0;
  }

  .dyr-mega-panel__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 32px;
    padding: 4px 0;
    color: #202020;
    font-family: var(--e-global-typography-text-font-family), "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    transition: color .16s ease;
  }

  .dyr-mega-panel__link::after {
    content: "→";
    flex: 0 0 auto;
    color: #B4532F;
    font-size: 15px;
    transform: translateX(0);
    transition: transform .16s ease, color .16s ease;
  }

  .dyr-mega-panel__link:hover,
  .dyr-mega-panel__link:focus-visible,
  .dyr-mega-panel__link.is-current-preview {
    color: #B4532F;
  }

  .dyr-mega-panel__link:hover::after,
  .dyr-mega-panel__link:focus-visible::after,
  .dyr-mega-panel__link.is-current-preview::after {
    transform: translateX(4px);
  }

  .dyr-mega-panel__item--all {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(32, 32, 32, .08);
  }

  .dyr-mega-panel__item--all .dyr-mega-panel__link {
    font-weight: 600;
  }

  .dyr-mega-panel__visual {
    position: relative;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    align-self: center;
    overflow: hidden;
    border-radius: 13px;
    background: #f4f1ed;
  }

  .dyr-mega-panel__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity .22s ease, transform .28s ease;
  }

  .dyr-mega-panel__image.is-active {
    opacity: 1;
    transform: scale(1);
  }

  /* Concierge uses a slightly taller 8:5 visual so portrait-origin assets
     keep faces and upper bodies inside the frame without aggressive zoom. */
  .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__visual {
    aspect-ratio: 8 / 5;
  }

  .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__image,
  .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__image.is-active {
    transform: scale(1);
    object-position: center;
  }

  /* EN concierge cover: the English artwork places the title higher in the square source.
     Bias the crop upward so the baked-in title sits at the same visual height as the IT artwork. */
  html[lang^="en"] .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__image[data-image-key="default"],
  html[lang^="en"] .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__image[data-image-key="default"].is-active {
    object-position: 50% 30%;
  }

  /* Prenotazioni: use the uncropped portrait source and let the browser frame it.
     The useful subjects start below the architectural top portion. */
  .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__image[data-image-key="2439"],
  .dyr-mega-panel[data-mega="40"] .dyr-mega-panel__image[data-image-key="2439"].is-active {
    object-position: 50% 30%;
  }

  .dyr-main-menu .menu-item-39 > a,
  .dyr-main-menu .menu-item-40 > a {
    position: relative;
  }

  body.dyr-mega-open .dyr-main-menu .menu-item-39 > a::after,
  body.dyr-mega-open .dyr-main-menu .menu-item-40 > a::after {
    display: none !important;
  }

  body.dyr-mega-open .dyr-main-menu .menu-item-39 > a,
  body.dyr-mega-open .dyr-main-menu .menu-item-40 > a {
    box-shadow: none !important;
  }

  body.dyr-mega-open .dyr-main-menu .menu-item-39.dyr-mega-trigger-active > a,
  body.dyr-mega-open .dyr-main-menu .menu-item-40.dyr-mega-trigger-active > a {
    color: #B4532F !important;
    box-shadow: inset 0 -2px 0 #B4532F !important;
  }
}

@media (max-width: 1024px) {
  .dyr-mega-layer {
    display: none !important;
  }
}