/* ============================================================
   ESLAM ATTIA — RESPONSIVE STYLESHEET
   responsive.css
   ============================================================ */

/* ── 1280px — wide containers ─────────────────────────────── */
@media (max-width: 1280px) {
    .artworks-grid,
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .media-grid        { grid-template-columns: repeat(2, 1fr); }
    .media-page-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── 1024px — tablet landscape ────────────────────────────── */
@media (max-width: 1024px) {
    .artworks-grid     { grid-template-columns: repeat(2, 1fr); }
    .media-grid        { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .media-page-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── 900px — tablet portrait ──────────────────────────────── */
@media (max-width: 900px) {
    /* about page bio layout */
    .bio-section       { grid-template-columns: 1fr; gap: 3rem; }
    .bio-sticky        { position: static; }
    .skills-grid       { grid-template-columns: 1fr; }
    .studio-photos     { grid-template-columns: 1fr; }

    /* artwork detail */
    .artwork-detail-grid          { grid-template-columns: 1fr; gap: 2.5rem; }
    .artwork-main-img-wrap        { position: static; }
    .related-grid                 { grid-template-columns: repeat(2, 1fr); }

    /* workshop detail */
    .ws-detail-grid    { grid-template-columns: 1fr; }
    .ws-sidebar        { position: static; order: -1; }

    /* contact */
    .contact-page      { grid-template-columns: 1fr; gap: 3rem; }
}

/* ── 768px — mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    /* navigation */
    .nav-links         { display: none; }
    .hamburger         { display: flex; }

    /* footer */
    .footer-grid       { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom     { flex-direction: column; gap: 1rem; text-align: center; }

    /* home — about preview */
    .about-preview     { grid-template-columns: 1fr; gap: 3rem; }
    .about-img-badge   { right: .5rem; bottom: .5rem; }
    .about-highlights  { grid-template-columns: 1fr 1fr; }

    /* home — artworks */
    .artworks-grid     { grid-template-columns: 1fr; }

    /* home — workshops */
    .workshops-grid    { grid-template-columns: 1fr; }

    /* home — media */
    .media-grid        { grid-template-columns: 1fr; }

    /* home — testimonials */
    .testimonials-grid { grid-template-columns: 1fr; }

    /* workshops index */
    .workshops-page-grid { grid-template-columns: 1fr; }

    /* workshop detail — hero title */
    .ws-hero-title     { font-size: clamp(1.3rem, 4vw, 1.8rem); left: 5rem; }

    /* hero */
    .hero-btns         { flex-direction: column; align-items: flex-start; }
    .hero-btns .btn-primary,
    .hero-btns .btn-outline-white { width: max-content; }
}

/* ── 620px — large phone ──────────────────────────────────── */
@media (max-width: 620px) {
    /* masonry gallery → single column */
    .masonry-grid      { columns: 1; }

    /* media page → single column */
    .media-page-grid   { grid-template-columns: 1fr; }
}

/* ── 580px — small phone ──────────────────────────────────── */
@media (max-width: 580px) {
    /* masonry gallery */
    .masonry-grid      { columns: 1; }

    /* related artworks */
    .related-grid      { grid-template-columns: 1fr; }

    /* contact form row */
    .form-row          { grid-template-columns: 1fr; }

    /* buttons */
    .hero-btns         { flex-direction: column; }
    .cta-btns          { flex-direction: column; align-items: center; }
    .bio-cta           { flex-direction: column; }

    /* format tabs wrap */
    .format-tabs       { flex-direction: column; }
    .format-tab        { min-width: unset; }

    /* workshop hero title */
    .ws-hero-title     { position: static; font-size: 1.5rem; color: var(--dark); text-shadow: none; margin-top: .5rem; }
    .ws-hero-badge     { position: static; display: inline-block; margin: 1rem 0 .5rem; }
    .ws-hero-img-wrap  { border-radius: 14px; }

    /* artwork detail actions */
    .artwork-detail-actions { flex-direction: column; }
}

/* ── 400px — very small phone ─────────────────────────────── */
@media (max-width: 400px) {
    /* nav logo text hidden on tiny screens */
    .nav-logo-text     { display: none; }

    /* page hero padding */
    .page-hero         { padding: 9rem 1.25rem 3.5rem; }
    .about-page-hero   { padding: 9rem 1.25rem 3.5rem; }

    /* hero name */
    .hero-name         { font-size: clamp(2.8rem, 10vw, 4rem); }

    /* about highlights single col */
    .about-highlights  { grid-template-columns: 1fr; }

    /* bio quick facts */
    .bio-quick         { padding: 1.25rem; }

    /* footer */
    .footer-grid       { gap: 1.5rem; }
}


/* ── Auth layout responsive ───────────────────────────────── */
@media (max-width: 900px) {
    .auth-bg          { display: none; }
    .auth-panel       { margin-left: 0; margin-right: 0; width: 100%; padding: 5rem 2rem 3rem; }
    .auth-lang-btn    { top: 1rem; right: 1rem; }
    [dir="rtl"] .auth-lang-btn { left: 1rem; right: auto; }
}

@media (max-width: 480px) {
    .auth-card        { max-width: 100%; }
    .auth-panel       { padding: 4.5rem 1.25rem 2.5rem; }
    .auth-title       { font-size: 1.6rem; }
}

/* ── Nav controls responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .nav-auth         { display: none; }
    .nav-user         { display: none; }
    /* lang btn stays visible on mobile nav */
    .lang-btn         { padding: .35rem .6rem; }
    .lang-label       { font-size: .72rem; }
}

@media (max-width: 400px) {
    .lang-btn         { padding: .3rem .5rem; }
}

/* ── RTL responsive fixes ─────────────────────────────────── */
@media (max-width: 768px) {
    [dir="rtl"] .about-img-badge { left: .5rem; bottom: .5rem; right: auto; }
    [dir="rtl"] .nav-inner       { flex-direction: row-reverse; }
}

@media (max-width: 900px) {
    [dir="rtl"] .bio-section     { direction: rtl; }
    [dir="rtl"] .contact-page    { direction: rtl; }
}