/* ================================================================
   KOOSHA PIANO — PORTFOLIO MOBILE OVERRIDES
   ================================================================ */

@media (max-width: 768px) {
  /* Portfolio preview grid on homepage */
  .portfolio-preview-section {
    padding-inline: 0;
  }

  .portfolio-preview-inner {
    padding-inline: 0;
  }

  .portfolio-preview-header,
  .portfolio-preview-cta {
    padding-inline: 1.25rem;
  }

  .portfolio-preview-grid {
    justify-content: flex-start;
    gap: 0.75rem;
    padding-inline: 1.25rem;
    padding-bottom: 0.5rem;
  }

  .portfolio-preview-grid .pp-card {
    flex: 0 0 160px;
    width: 160px;
    height: 285px;
  }

  /* Filter bar: wrap and scroll */
  .portfolio-filter-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
  }

  .portfolio-filter-inner {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .portfolio-filter-inner::-webkit-scrollbar {
    display: none;
  }

  .pf-btn {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
  }

  .portfolio-search {
    width: 100%;
  }

  /* Grid: 2 columns on mobile */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Single column on very small screens */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .portfolio-page-header {
    padding-block: 1.25rem 1.75rem;
  }
}

/* ── Mobile search in header ─────────────────────────────────── */
.pf-search--mobile { display: none; }
.pf-search-btn--mobile { display: none; }

@media (max-width: 768px) {
  .portfolio-page-header-inner {
    position: relative;
  }

  .portfolio-filter-wrap .portfolio-search { display: none; }

  .pf-search--mobile {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    direction: ltr;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .pf-search-btn--mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--clr-border);
    border-radius: 50%;
    background: transparent;
    color: var(--clr-txt-2);
    cursor: pointer;
    transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
    flex-shrink: 0;
  }

  .pf-search-btn--mobile.active {
    border-color: var(--clr-gold);
    color: var(--clr-gold-lt);
    background: rgba(140,107,42,0.12);
  }

  .pf-search-input--mobile {
    width: 0;
    opacity: 0;
    border: none;
    border-bottom: 1px solid rgba(201,170,113,0.4);
    background: transparent;
    color: var(--clr-txt);
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    outline: none;
    transition: width 0.3s ease, opacity 0.3s ease;
    direction: rtl;
  }

  .pf-search-input--mobile.open {
    width: 160px;
    opacity: 1;
    border-bottom-color: var(--clr-gold-lt);
  }
}

/* ── Portfolio modal on mobile ───────────────────────────────── */
@media (max-width: 768px) {
  .portfolio-modal,
  .pf-modal {
    align-items: flex-end;
  }

  .portfolio-modal-inner,
  .pf-modal-inner {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}