/* ============================================
   JERRY PARK | styleservicios.css
   Full Responsive — Services page
   ============================================ */

/* ---------- EDITORIAL (SERVICIOS MENU) ---------- */
.editorial {
    display: flex;
    align-items: center;
    padding-top: clamp(80px, 12vw, 140px);
    padding-bottom: clamp(40px, 7vw, 80px);
    position: relative;
    min-height: 65vh;
}

.editorial .container { width: 100%; }

/* Each service title as a link */
.editorial a {
    color: #fff;
    text-decoration: none;
    display: block;
    margin: 2px 0;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
}

/* Animated underline */
.editorial a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.5s ease;
}

.editorial a:hover { color: rgba(255,255,255,0.65); }

.editorial a:hover::after {
    transform: translateX(-50%) scaleX(1);
    width: 100px;
}

/* Title hover: letter-spacing expand */
.editorial a .editorial-title,
.editorial a h1.editorial-title {
    transition: letter-spacing 0.5s ease, opacity 0.4s ease;
    will-change: letter-spacing;
}

.editorial a:hover .editorial-title,
.editorial a:hover h1.editorial-title {
    opacity: 0.65;
}

/* Stagger entry animation */
.editorial .container a:nth-child(1) { animation: fadeUp 0.7s 0.10s ease both; }
.editorial .container a:nth-child(2) { animation: fadeUp 0.7s 0.25s ease both; }
.editorial .container a:nth-child(3) { animation: fadeUp 0.7s 0.40s ease both; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- GRID (services gallery pages) ---------- */
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
    gap: 6px;
    width: 92%;
    max-width: 1440px;
    margin: 40px auto;
    padding: 0;
}

.editorial-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #0d0d0d;
}

.editorial-item img,
.editorial-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    filter: brightness(0.78);
    transition:
        transform 0.9s cubic-bezier(0.2, 1, 0.3, 1),
        filter 0.6s ease;
}

.editorial-item:hover img,
.editorial-item:hover video {
    transform: scale(1.07);
    filter: brightness(1);
}

@media (hover: none) {
    .editorial-item:hover img,
    .editorial-item:hover video {
        transform: scale(1);
        filter: brightness(0.85);
    }
}

.editorial-item.tall  { grid-row: span 2; }
.editorial-item.wide  { grid-column: span 2; }
.editorial-item.big   { grid-row: span 3; }

/* ---------- PAGE TRANSITION ---------- */
.page-transition {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease-in-out, visibility 0.7s;
}

.page-transition.hidden { opacity: 0; visibility: hidden; }
.page-transition.fade-out { opacity: 0; }

/* ---------- RESPONSIVE ---------- */

/* Tablet horizontal (≤992px) */
@media (max-width: 992px) {
    .editorial {
        min-height: 55vh;
        padding-top: clamp(70px, 10vw, 110px);
    }

    .editorial-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
        width: 96%;
        gap: 5px;
    }

    .editorial-item.big {
        grid-row: span 2;
        grid-column: span 1;
    }

    /* On hover expand letter-spacing less */
    .editorial a:hover .editorial-title {
        letter-spacing: clamp(8px, 1.5vw, 14px);
    }
}

/* Tablet portrait / large phone (≤768px) */
@media (max-width: 768px) {
    .editorial {
        min-height: 50vh;
        padding-top: 70px;
    }

    .editorial-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
        width: 100%;
        gap: 4px;
        margin: 16px auto;
    }

    .editorial-item.wide  { grid-column: span 2; }
    .editorial-item.tall  { grid-row: span 1; }
    .editorial-item.big   { grid-row: span 1; grid-column: span 2; }

    .editorial a:hover .editorial-title {
        opacity: 0.65;
        letter-spacing: clamp(6px, 1.5vw, 12px);
    }
}

/* Medium phone (≤576px) */
@media (max-width: 576px) {
    .editorial {
        min-height: 45vh;
        padding-top: 60px;
    }

    .editorial-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
        width: 100%;
        gap: 3px;
        margin: 10px auto;
    }

    .editorial-item.wide { grid-column: span 2; }
    .editorial-item.tall,
    .editorial-item.big  { grid-row: span 1; grid-column: span 1; }
}

/* Small phone (≤480px) */
@media (max-width: 480px) {
    .editorial {
        min-height: 40vh;
        padding-top: 56px;
    }

    .editorial-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 210px;
        gap: 4px;
        margin: 8px auto;
    }

    .editorial-item.wide,
    .editorial-item.tall,
    .editorial-item.big {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* On tiny screens, hover effect on title disabled (touch) */
    .editorial a:hover .editorial-title {
        opacity: 0.7;
        letter-spacing: inherit;
    }
}

/* Extra small (≤380px) */
@media (max-width: 380px) {
    .editorial-grid {
        grid-auto-rows: 180px;
        gap: 3px;
    }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .editorial {
        min-height: 75vw;
        padding-top: 50px;
    }

    .editorial-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 160px;
        gap: 4px;
    }

    .editorial-item.tall { grid-row: span 2; }
    .editorial-item.wide { grid-column: span 2; }
    .editorial-item.big  { grid-row: span 2; }
}

/* Large desktops */
@media (min-width: 1440px) {
    .editorial-grid {
        grid-auto-rows: 300px;
        gap: 8px;
    }
}