/* Dayeem Studio - V11 Mobile Fixes */
/* Target: mobile hero/header overflow and small-screen layout refinement */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    max-width: 100vw;
  }

  .premium-header,
  .main-nav,
  .studio-opening,
  .selected-showcase,
  .services-section,
  .products-section,
  .work-section,
  .process-section,
  .contact-section,
  .site-footer {
    overflow-x: hidden;
  }

  .container,
  .main-nav,
  .studio-opening .container,
  .selected-showcase .container,
  .services-section .container,
  .products-section .container,
  .work-section .container,
  .process-section .container,
  .contact-section .container,
  .site-footer .container {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box;
  }

  .main-nav,
  .main-nav > *,
  .premium-header > *,
  .studio-opening > *,
  .studio-opening .container > * {
    min-width: 0 !important;
  }

  .main-nav :is(a, button),
  .premium-header :is(a, button) {
    max-width: 100%;
  }

  /* Force the hero into a clean single-column mobile layout */
  .studio-opening .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .studio-opening {
    padding-block: 28px 40px !important;
  }

  .studio-opening .section-index,
  .studio-opening .kicker {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px 0 !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word;
  }

  .studio-opening h1 {
    display: block;
    width: 100%;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    font-size: clamp(2rem, 11vw, 3rem) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .studio-opening p {
    display: block;
    width: 100%;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    font-size: 1rem !important;
    line-height: 1.85 !important;
    overflow-wrap: break-word;
  }

  .studio-opening :is(.card-actions, .cta-row, .button-row) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
  }

  .studio-opening :is(.button, .button-accent, .round-link) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box;
  }

  .services-section .service-card,
  .products-section .product-card,
  .portfolio-card,
  .process-section .process-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .portfolio-card .portfolio-media,
  .portfolio-card .portfolio-meta,
  .product-card,
  .service-card,
  .process-item {
    overflow: hidden;
  }

  .portfolio-card .portfolio-meta h3,
  .portfolio-card .portfolio-meta p,
  .service-card h3,
  .service-card p,
  .product-card h3,
  .product-card p,
  .process-item h3,
  .process-item p {
    overflow-wrap: break-word;
  }

  .mobile-contact-bar {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .mobile-contact-bar :is(a, button) {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center !important;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container,
  .main-nav,
  .studio-opening .container,
  .selected-showcase .container,
  .services-section .container,
  .products-section .container,
  .work-section .container,
  .process-section .container,
  .contact-section .container,
  .site-footer .container {
    padding-inline: 12px !important;
  }

  .studio-opening {
    padding-block: 24px 34px !important;
  }

  .studio-opening h1 {
    font-size: clamp(1.85rem, 10.5vw, 2.55rem) !important;
    line-height: 1.2 !important;
  }

  .studio-opening p {
    font-size: .97rem !important;
    line-height: 1.78 !important;
  }

  .studio-opening :is(.button, .button-accent, .round-link) {
    min-height: 46px !important;
  }
}

/* DAYEEM V22 START: restrained editorial polish */
:root {
  --dy22-green: #0b4239;
  --dy22-ink: #152724;
  --dy22-line: rgba(13,61,53,.14);
  --dy22-lift: 0 22px 50px rgba(13,37,34,.12);
}
.studio-opening {
  background-image: radial-gradient(ellipse at 7% 10%, rgba(77,146,122,.08), transparent 49%);
}
.studio-opening .opening-copy { min-width: 0; }
.studio-opening #opening-title {
  text-wrap: balance;
  letter-spacing: -.025em;
}
.studio-opening .opening-copy > p { max-width: 68ch; }
.premium-header { border-bottom: 1px solid var(--dy22-line); }
.premium-header a, .premium-header button { transition: color .2s ease, background-color .2s ease; }
.service-card, .process-item {
  border-color: var(--dy22-line);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.portfolio-card {
  border: 1px solid var(--dy22-line);
  border-radius: 23px;
  box-shadow: 0 9px 30px rgba(12,36,34,.055);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.portfolio-card:not(.portfolio-large) .portfolio-media { aspect-ratio: 16 / 10; overflow: hidden; }
.portfolio-card .portfolio-media img { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.portfolio-card .portfolio-meta { padding: clamp(18px, 2.2vw, 28px); }
.portfolio-card .portfolio-meta h3 { line-height: 1.38; }
.portfolio-card .portfolio-meta p { line-height: 1.86; }
.work-section .filter-bar { gap: 10px; }
.work-section .filter-button { min-height: 44px; border-radius: 999px; }
.product-card { transition: box-shadow .3s ease, transform .3s ease; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #198773;
  outline-offset: 3px;
}
@media (hover:hover) and (pointer:fine) {
  .portfolio-card:hover, .portfolio-card:focus-within {
    transform: translateY(-5px);
    border-color: rgba(31,114,92,.36);
    box-shadow: var(--dy22-lift);
  }
  .portfolio-card:hover .portfolio-media img { transform: scale(1.035); }
  .service-card:hover { transform: translateY(-3px); }
}
@media (max-width: 760px) {
  .studio-opening .container.opening-layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .studio-opening :is(.opening-side,.opening-copy,.opening-note,.opening-actions) {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 / -1;
  }
  .studio-opening #opening-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.95rem, 8.6vw, 2.7rem) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  .studio-opening .opening-actions { flex-wrap: wrap; gap: 12px; }
  .portfolio-card { border-radius: 18px; }
  .work-section .filter-bar { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card, .portfolio-card .portfolio-media img,
  .service-card, .product-card, .process-item { transition: none !important; }
}
/* DAYEEM V22 END */

/* DAYEEM V23 IMAGE FIT START */

/* Display complete portfolio screenshots without cropping */

.portfolio-card .portfolio-media,
.portfolio-card:not(.portfolio-large) .portfolio-media {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: #f5f4f0;
}

.portfolio-card .portfolio-media img,
.portfolio-card:not(.portfolio-large) .portfolio-media img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    scale: 1 !important;
}

.portfolio-card:hover .portfolio-media img,
.portfolio-card:focus-within .portfolio-media img {
    transform: none !important;
    scale: 1 !important;
}

/* DAYEEM V23 IMAGE FIT END */


/* DAYEEM V32 PORTFOLIO ORDER */
.portfolio-card {
    order: 0 !important;
}

.portfolio-card[data-project="palmea"] {
    order: -200 !important;
}

.portfolio-card:has(h3) {
    min-width: 0;
}
/* END V32 */