/**
 * Plantilla "ESTUDI" — la personalitat.
 * ============================================================================
 * Per a marques visuals: estudis de disseny, fotografia, arquitectura, art.
 *
 * El caràcter: EL MARC DESAPAREIX. La capçalera és un filet de text que no
 * s'enganxa ni posa vores, el llenç arriba a 1440px perquè les imatges puguin
 * respirar, i el títol de cada pàgina és una peça tipogràfica gegant alineada
 * a l'esquerra en comptes d'una banda de color. Els botons van plens de tinta
 * (--wsf-text) i no d'accent: aquí l'accent és per al que hi passa per sobre.
 * Els camps de formulari són una línia fina, com un full de notes.
 *
 * Família de composicions (contracte de tota plantilla):
 *   - Portada: capçalera mínima i contingut de seguida — les imatges fan d'hero.
 *   - Interior: mateixa capçalera i titular gegant a l'esquerra (show_title).
 *   - Formularis i botons: línia fina i tinta plena.
 *
 * La base (tipografia de l'HTML, formularis, accessibilitat, calaix de mòbil)
 * és a templates/base.css. Aquí només hi ha el que fa que sigui ESTUDI.
 */

body.wsf-tpl-estudi {
    --wsf-ample: 1440px;
    --wsf-marge: clamp(20px, 4vw, 56px);
    --wsf-mesura: 70ch;
    --wsf-barra: 64px;
}

/* ---------- Tipografia: gran, tancada i amb aire ---------- */
body.wsf-tpl-estudi h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
body.wsf-tpl-estudi h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; }
body.wsf-tpl-estudi h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; }
body.wsf-tpl-estudi h4 { font-size: 1.15rem; line-height: 1.3; }

body.wsf-tpl-estudi img { border-radius: calc(var(--wsf-radius) * 0.5); }
body.wsf-tpl-estudi blockquote {
    margin: var(--wsf-r4) 0;
    padding: 0 0 0 var(--wsf-r3);
    border-left: 2px solid var(--wsf-text);
    font-size: 1.15em;
    line-height: 1.4;
}

/* ==================================================================== *
 * CAPÇALERA MÍNIMA: sense vora, sense fons, sense enganxar-se
 * ==================================================================== */

body.wsf-tpl-estudi .wsf-header { background: var(--wsf-bg); }
body.wsf-tpl-estudi .wsf-header-inner {
    max-width: var(--wsf-ample);
    margin: 0 auto;
    padding: var(--wsf-r3) var(--wsf-marge);
    display: flex;
    align-items: center;
    gap: var(--wsf-r3);
    min-height: var(--wsf-barra);
}
body.wsf-tpl-estudi .wsf-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--wsf-text);
}
body.wsf-tpl-estudi .wsf-brand:hover { color: var(--wsf-text); opacity: 0.7; }
body.wsf-tpl-estudi .wsf-brand img { display: block; max-height: 34px; width: auto; border-radius: 0; }
body.wsf-tpl-estudi .wsf-marca-nom { font-size: 1.05rem; letter-spacing: -0.01em; }

/* El menú és text discret: aquí la veu la porta el contingut. */
body.wsf-tpl-estudi .wsf-nav {
    display: flex;
    align-items: center;
    gap: var(--wsf-r3);
    margin-left: auto;
}
body.wsf-tpl-estudi .wsf-nav-link {
    font-family: var(--wsf-font-body);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--wsf-text);
    opacity: 0.65;
    padding: 0.4em 0;
    white-space: nowrap;
    transition: opacity .16s ease;
}
body.wsf-tpl-estudi .wsf-nav-link:hover { opacity: 1; color: var(--wsf-text); }
body.wsf-tpl-estudi .wsf-nav-link.actiu {
    opacity: 1;
    color: var(--wsf-text);
    /* Un punt en comptes de subratllat: menys marc encara. */
    position: relative;
}
body.wsf-tpl-estudi .wsf-nav-link.actiu::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.35em;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--wsf-accent);
}

body.wsf-tpl-estudi .wsf-lang { display: flex; align-items: center; gap: 0.2em; flex: 0 0 auto; }
body.wsf-tpl-estudi .wsf-lang-link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--wsf-text);
    opacity: 0.45;
    padding: 0.4em 0.5em;
    line-height: 1;
}
body.wsf-tpl-estudi .wsf-lang-link:hover { opacity: 0.8; color: var(--wsf-text); }
body.wsf-tpl-estudi .wsf-lang-link.actiu { opacity: 1; color: var(--wsf-accent); }

/* ==================================================================== *
 * TITULAR GEGANT (interiors amb show_title) — sense banda de color
 * ==================================================================== */

body.wsf-tpl-estudi .wsf-titol-gran {
    max-width: var(--wsf-ample);
    margin: 0 auto;
    padding: var(--wsf-r5) var(--wsf-marge) 0;
}
body.wsf-tpl-estudi .wsf-titol-gran h1 {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(2.8rem, 1.4rem + 6.4vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
}
/* Un filet finíssim tanca el titular sense fer-ne una caixa. */
body.wsf-tpl-estudi .wsf-titol-gran::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--wsf-line);
    margin-top: var(--wsf-r4);
}

/* ==================================================================== *
 * CONTINGUT: el llenç ample
 * ==================================================================== */

body.wsf-tpl-estudi .wsf-main {
    max-width: var(--wsf-ample);
    margin: 0 auto;
    padding: var(--wsf-r5) var(--wsf-marge) calc(var(--wsf-r5) * 1.4);
    width: 100%;
}
/* A la portada el contingut arrenca de seguida: ÉS l'hero. */
body.wsf-tpl-estudi.wsf-portada .wsf-main { padding-top: var(--wsf-r3); }

/* ==================================================================== *
 * BOTONS DE TINTA I FORMULARIS DE LÍNIA FINA
 * ==================================================================== */

body.wsf-tpl-estudi .wsf-main button,
body.wsf-tpl-estudi .wsf-main input[type="submit"],
body.wsf-tpl-estudi .wsf-main input[type="button"],
body.wsf-tpl-estudi .wsf-main .btn,
body.wsf-tpl-estudi .wsf-main .wsf-btn {
    background: var(--wsf-text);
    color: var(--wsf-bg);
    border-radius: var(--wsf-radius);
    padding: 0.9em 1.7em;
}
body.wsf-tpl-estudi .wsf-main button:hover,
body.wsf-tpl-estudi .wsf-main .btn:hover,
body.wsf-tpl-estudi .wsf-main .wsf-btn:hover {
    background: var(--wsf-accent);
    color: var(--wsf-on-accent);
    opacity: 1;
    transform: translateY(-1px);
}
body.wsf-tpl-estudi .wsf-main .wsf-btn-alt {
    border-color: color-mix(in srgb, var(--wsf-text) 30%, transparent);
    opacity: 1;
    padding: 0.9em 1.7em;
}
body.wsf-tpl-estudi .wsf-main .wsf-btn-alt:hover { border-color: var(--wsf-text); }

body.wsf-tpl-estudi .wsf-main input[type="text"],
body.wsf-tpl-estudi .wsf-main input[type="email"],
body.wsf-tpl-estudi .wsf-main input[type="tel"],
body.wsf-tpl-estudi .wsf-main input[type="url"],
body.wsf-tpl-estudi .wsf-main input[type="number"],
body.wsf-tpl-estudi .wsf-main input[type="date"],
body.wsf-tpl-estudi .wsf-main input[type="search"],
body.wsf-tpl-estudi .wsf-main input[type="password"],
body.wsf-tpl-estudi .wsf-main textarea,
body.wsf-tpl-estudi .wsf-main select {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--wsf-line);
    border-radius: 0;
    padding: 0.7em 2px;
}
body.wsf-tpl-estudi .wsf-main input:hover,
body.wsf-tpl-estudi .wsf-main textarea:hover,
body.wsf-tpl-estudi .wsf-main select:hover { border-bottom-color: color-mix(in srgb, var(--wsf-text) 40%, transparent); }
body.wsf-tpl-estudi .wsf-main input:focus,
body.wsf-tpl-estudi .wsf-main textarea:focus,
body.wsf-tpl-estudi .wsf-main select:focus { border-bottom-color: var(--wsf-accent); }
body.wsf-tpl-estudi .wsf-main label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.55;
}

/* Botó de tinta: el text hi va del color del FONS del tema, no de l'accent.
   Sense aquesta línia, el color d'enllaç de base.css el deixava del mateix to
   que la tinta i el botó sortia buit. */
body.wsf-tpl-estudi .wsf-main a.wsf-btn { color: var(--wsf-bg); }
body.wsf-tpl-estudi .wsf-main a.wsf-btn:hover { color: var(--wsf-on-accent); }

/* ==================================================================== *
 * PEU D'UNA LÍNIA
 * ==================================================================== */

body.wsf-tpl-estudi .wsf-footer {
    margin-top: var(--wsf-r5);
    border-top: 1px solid var(--wsf-line);
}
body.wsf-tpl-estudi .wsf-footer-inner {
    max-width: var(--wsf-ample);
    margin: 0 auto;
    padding: var(--wsf-r3) var(--wsf-marge);
    display: flex;
    align-items: center;
    gap: var(--wsf-r3);
    flex-wrap: wrap;
}
body.wsf-tpl-estudi .wsf-footer-marca { display: flex; align-items: baseline; gap: var(--wsf-r2); flex: 0 1 auto; }
body.wsf-tpl-estudi .wsf-brand-peu img { max-height: 26px; }
body.wsf-tpl-estudi .wsf-brand-peu .wsf-marca-nom { font-size: 0.95rem; }
body.wsf-tpl-estudi .wsf-footer-org { margin: 0; font-size: 0.82rem; }
body.wsf-tpl-estudi .wsf-footer-titol { display: none; }   /* peu d'una línia: sense capçaleres de columna */
body.wsf-tpl-estudi .wsf-footer-nav {
    display: flex;
    gap: var(--wsf-r3);
    flex-wrap: wrap;
    margin-left: auto;
}
body.wsf-tpl-estudi .wsf-footer-nav a { color: var(--wsf-text); opacity: 0.6; font-size: 0.85rem; }
body.wsf-tpl-estudi .wsf-footer-nav a:hover { opacity: 1; }
body.wsf-tpl-estudi .wsf-footer-baix {
    max-width: var(--wsf-ample);
    margin: 0 auto;
    padding: 0 var(--wsf-marge) var(--wsf-r3);
}

/* ==================================================================== *
 * RESPONSIVE — duplicat @media + @container device, com mana la casa
 * ==================================================================== */

@media (max-width: 900px) {
    body.wsf-tpl-estudi .wsf-nav-toggle { display: inline-flex; }
    body.wsf-tpl-estudi .wsf-header-inner { flex-wrap: wrap; padding-top: var(--wsf-r2); padding-bottom: var(--wsf-r2); }
    body.wsf-tpl-estudi .wsf-brand { margin-right: auto; }
    body.wsf-tpl-estudi .wsf-nav {
        display: none;
        order: 10;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--wsf-r2) 0 var(--wsf-r3);
    }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav { display: flex; }
    /* Al calaix el menú deixa de ser discret i es fa gran: és l'única cosa que
       hi ha a la pantalla mentre està obert. */
    body.wsf-tpl-estudi .wsf-nav-link {
        opacity: 1;
        font-family: var(--wsf-font-heading);
        font-size: clamp(1.5rem, 1rem + 2.4vw, 2.2rem);
        letter-spacing: -0.02em;
        padding: 0.35em 0;
        white-space: normal;
    }
    body.wsf-tpl-estudi .wsf-nav-link.actiu { color: var(--wsf-accent); }
    body.wsf-tpl-estudi .wsf-nav-link.actiu::after { display: none; }
    body.wsf-tpl-estudi.wsf-amb-menu .wsf-lang {
        display: none;
        order: 11;
        width: 100%;
        margin-bottom: var(--wsf-r3);
    }
    body.wsf-tpl-estudi.wsf-amb-menu.wsf-nav-obert .wsf-lang { display: flex; }
    body.wsf-tpl-estudi .wsf-lang-link { padding: 0.5em 0.7em 0.5em 0; }
    body.wsf-tpl-estudi .wsf-footer-nav { margin-left: 0; }
}
@container device (max-width: 900px) {
    body.wsf-tpl-estudi .wsf-nav-toggle { display: inline-flex; }
    body.wsf-tpl-estudi .wsf-header-inner { flex-wrap: wrap; padding-top: var(--wsf-r2); padding-bottom: var(--wsf-r2); }
    body.wsf-tpl-estudi .wsf-brand { margin-right: auto; }
    body.wsf-tpl-estudi .wsf-nav {
        display: none;
        order: 10;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--wsf-r2) 0 var(--wsf-r3);
    }
    body.wsf-tpl-estudi.wsf-nav-obert .wsf-nav { display: flex; }
    body.wsf-tpl-estudi .wsf-nav-link {
        opacity: 1;
        font-family: var(--wsf-font-heading);
        font-size: clamp(1.5rem, 1rem + 2.4vw, 2.2rem);
        letter-spacing: -0.02em;
        padding: 0.35em 0;
        white-space: normal;
    }
    body.wsf-tpl-estudi .wsf-nav-link.actiu { color: var(--wsf-accent); }
    body.wsf-tpl-estudi .wsf-nav-link.actiu::after { display: none; }
    body.wsf-tpl-estudi.wsf-amb-menu .wsf-lang {
        display: none;
        order: 11;
        width: 100%;
        margin-bottom: var(--wsf-r3);
    }
    body.wsf-tpl-estudi.wsf-amb-menu.wsf-nav-obert .wsf-lang { display: flex; }
    body.wsf-tpl-estudi .wsf-lang-link { padding: 0.5em 0.7em 0.5em 0; }
    body.wsf-tpl-estudi .wsf-footer-nav { margin-left: 0; }
}

@media (max-width: 620px) {
    body.wsf-tpl-estudi .wsf-titol-gran h1 { max-width: none; }
    body.wsf-tpl-estudi .wsf-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--wsf-r2); }
}
@container device (max-width: 620px) {
    body.wsf-tpl-estudi .wsf-titol-gran h1 { max-width: none; }
    body.wsf-tpl-estudi .wsf-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--wsf-r2); }
}