/* =========================================================
   SCW – CATALOG (UNIFIED + SMOOTH SLIDE DESKTOP & MOBILE)
   ========================================================= */

   @view-transition {
     navigation: auto;
   }

/* -------- ROOT VARIABLES -------- */
:root{
  --scw-bg: #ffffff;
  --scw-border: rgba(0,0,0,.10);
  --scw-muted: rgba(0,0,0,.55);
  --scw-muted2: rgba(0,0,0,.38);
  --scw-ink: #111;

  --scw-pill-border: rgba(0,0,0,.10);
  --scw-pill-active-bg: #D6BF8A;
  --scw-pill-active-fg: #fff;

  --scw-hover-bg: rgba(0,0,0,.035);

  --scw-font: Quicksand, ui-sans-serif, system-ui,
              -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ===== TRANSITIONS (canvia aquests valors per fer-ho més lent) ===== */
  --scw-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Desktop collapse speed (sidebar slide) */
  --scw-desktop-dur: 1.40s;

  /* Mobile overlay speed (sidebar + overlay fade) */
  --scw-mobile-dur: 1.40s;
  --scw-overlay-dur: 1.40s;

  /* Sidebar width */
  --scw-sidebar-w: 280px;
  --scw-sidebar-w-mobile: 320px;
}

/* -------- GLOBAL RESET -------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html,
body{
  height: 100%;
  margin: 0;
  background: var(--scw-bg);
  color: var(--scw-ink);
  font-family: var(--scw-font);
  line-height: 1.35;
}

button,
input{ font-family: inherit; }

/* -------- APP LAYOUT -------- */
.scw-app{
  min-height: 100%;
  display: grid;
  grid-template-columns: var(--scw-sidebar-w) 1fr;

  /* IMPORTANT: no confiem només en animar grid-template-columns
     (no és fiable a tots els navegadors). La suavitat la dona el transform. */
}

/* -------- SIDEBAR -------- */
.scw-sidebar{
  border-right: 1px solid var(--scw-border);
  padding: 24px 18px;
  background: #fff;

  height: 100vh;
  display: flex;
  flex-direction: column;

  /* Desktop slide (same feel as mobile) */
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;

  transition:
    transform var(--scw-desktop-dur) var(--scw-ease),
    opacity   calc(var(--scw-desktop-dur) * .70) ease,
    padding   var(--scw-desktop-dur) var(--scw-ease),
    border-color var(--scw-desktop-dur) ease;

  will-change: transform, opacity;
}

/* Desktop: collapsed state -> smooth slide out */
body.sidebar-collapsed .scw-sidebar{
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border-right-color: transparent;
}


.scw-brand{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

.scw-brand__mark{
  width: 72px;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

.scw-brand__name{
  font-size: 14px;
  letter-spacing: .22em;
  font-weight: 300;
  line-height: 1.15;
}

.scw-brand__sub{
  margin-top: 6px;
  font-style: italic;
  color: var(--scw-muted);
  font-size: 13px;
}

.scw-nav{ margin-top: 30px; }

.scw-nav__title,
.scw-volumes__title{
  color: var(--scw-muted2);
  font-size: 12px;
  letter-spacing: .12em;
  margin-top: 20px;
  margin-bottom: 10px;
}

.scw-nav__item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  text-decoration: none;
  color: var(--scw-ink);
  border: 1px solid transparent;
}

.scw-nav__item--active{
  background: #111;
  color: #fff;
}

.scw-nav__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
}

/* -------- VOLUMES -------- */
.scw-volumes__list{
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;

  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.scw-volumes__list .scw-volume{
  -webkit-appearance: none;
  appearance: none;

  border-radius: 0;
  padding: 10px 12px;

  border: 0;
  background: transparent;
  margin: 0;

  width: 100%;
  cursor: pointer;
  text-align: left;

  display: flex;
  align-items: flex-start;
  gap: 12px;

  font: inherit;
  color: inherit;

  transition: background-color .15s ease;
}

.scw-volumes__list .scw-volume:hover{
  background: var(--scw-hover-bg);
}

.scw-volumes__list .scw-volume.is-active{
  background: var(--scw-hover-bg);
}

.scw-volume__icon{
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  opacity: .65;
  color: #b99a5a;
}

.scw-volume__name{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 500;
}

.scw-volume__desc{
  margin-top: 2px;
  font-size: 11px;
  color: var(--scw-muted);
  line-height: 1.25;
}

/* -------- MAIN -------- */
.scw-main{ min-width: 0; }

/* -------- TOPBAR -------- */
.scw-topbar{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 22px;
}


/* Estil per al botó de Learning tracks */
.practice-tracks-button {
  padding: 6px 20px;
  background-color: #3184A0;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.practice-tracks-button:hover {
  background-color: #3CA1C3;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.practice-tracks-button:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 3px;
}

/* Estil per al botó de Login */
.scw-topbar__login {
  position: fixed;
  right: 20px;
  padding: 6px 20px;
  background-color: #333;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.scw-topbar__login:hover {
  background-color: #777;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.scw-topbar__login:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 3px;
}


.scw-sidebarToggle{
  border: 1px solid var(--scw-border);
  background: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.scw-sidebarToggle:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

.scw__count{
  color: var(--scw-muted);
  font-size: 12px;
  margin-left: 10px;
  margin-bottom: 10px;
}

/* -------- CONTENT -------- */
.scw-content{ padding: 0 22px 26px; }

.scw-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items:start;
}

/* -------- SEARCH -------- */
.scw-searchWrap{
  border: 1px solid var(--scw-border);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  margin-bottom: 14px;
}

.scw-search{
  width: 100%;
  border: 0;
  outline: none;
  font-size: 14px;
  background: transparent;
}

/* -------- FILTERS -------- */
.scw-filtersHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.scw-clearLink{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:transparent;
  border:0;
  padding:0;
  color: #b99a5a;
  cursor:pointer;
}

/* -------- TOOGLE -------- */
.filter-toggle {
  width: 100%;
  padding: 0;
  font-size: 13px;
  letter-spacing: .14em;
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  color: var(--scw-ink);
  cursor: pointer;
  text-align: left;
  line-height: 36px;  /* Centrem el text dins del botó */
  height: 36px;  /* Alçada fixa per garantir que el text estigui visible */
  transition: background-color 0.15s ease;
  min-width: 100px;  /* Amplada mínima per mantenir el text llegible */
  display: inline-block;
  vertical-align: middle;  /* Centra el text verticalment */
}


/* =========================================================
   DESKTOP (>=981px) – Smooth slide like mobile
   ========================================================= */
@media (min-width: 981px){

  /* switch layout to flex for animatable width */
  .scw-app{
    display: flex;
    min-height: 100%;
  }

  .scw-sidebar{
    width: var(--scw-sidebar-w, 280px);
    flex: 0 0 auto;

    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;

    transition:
      width     var(--scw-desktop-dur, 1.10s) var(--scw-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      transform var(--scw-desktop-dur, 1.10s) var(--scw-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      opacity   calc(var(--scw-desktop-dur, 1.10s) * .70) ease,
      padding   var(--scw-desktop-dur, 1.10s) var(--scw-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      border-color var(--scw-desktop-dur, 1.10s) ease;

    will-change: width, transform, opacity;
  }

  .scw-main{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* collapsed state: SLIDE + shrink width */
  body.sidebar-collapsed .scw-sidebar{
    width: 0;
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    padding: 0;
    border-right-color: transparent;
    overflow: hidden;
  }
}


.scw-clearLink:hover{ color: var(--scw-ink); }

.scw-filtersCard{
  border: 1px solid var(--scw-border);
  border-radius: 12px;
  padding: 0 14px 12px;
  width: 100%;
  min-width: 280px;  /* Amplada mínima perquè no es faci massa petit */
  max-height: 40px;  /* Mantenir el botó "FILTERS" visible quan està recollit */
  overflow: hidden;  /* Evitar que el contingut surti fora del contenidor */
  transition: max-height 0.5s ease-in-out;  /* Animació suau */
}

.scw-filtersCard.open {
  max-height: 450px;  /* Ajusta aquest valor per allotjar els filtres completament */
}

.scw-filtersCard__title{
  font-size: 13px;
  letter-spacing: .14em;
  margin-bottom: 12px;
  font-weight: 600;
}

.scw-filterBlock{ margin-bottom: 14px; }

.scw-filterBlock__label{
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--scw-muted2);
  margin-bottom: 8px;
}

.scw-pills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scw-pill{
  border: 1px solid var(--scw-pill-border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
}

.scw-pill:hover{ border-color: rgba(0,0,0,.22); }

.scw-pill.is-active{
  background: var(--scw-pill-active-bg);
  color: var(--scw-pill-active-fg);
  border-color: transparent;
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.scw-clearBtn{
  width: 100%;
  margin-top: 6px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--scw-border);
  background: #fff;
  cursor:pointer;
}

.scw-clearBtn:hover{ border-color: rgba(0,0,0,.22); }

/* -------- ACCESSIBILITY -------- */
.scw-clearBtn:focus-visible,
.scw-search:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

.scw-pill:focus-visible{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 3px;
}

.scw-pill:focus:not(:focus-visible){ outline: none; }

/* -------- ERRORS -------- */
.scw-error{
  margin-bottom: 10px;
  color: #a40000;
  font-size: 13px;
}

/* -------- LIST -------- */
.scw-list{ border-top: 1px solid var(--scw-border); }

.scw-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--scw-border);
}

.scw-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 18px 14px;
  border-radius: 0;
  transition: background-color .15s ease;
}

.scw-card:hover .scw-row{
  background-color: var(--scw-hover-bg);
}

.scw-card:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 3px;
  border-radius: 10px;
}

.scw-row__title{
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.scw-card:hover .scw-row__title{ color: #b99a5a; }

.scw-row__meta{
  color: rgba(0,0,0,.55);
  font-size: 13px;
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items:center;
}

.scw-metaItem{
  display:flex;
  gap: 8px;
  align-items:center;
}

.scw-metaIcon{
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  flex: 0 0 auto;
  color: #b99a5a;
}

.scw-row__tags{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.scw-tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  color: rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;
}

/* Empty state */
.scw-empty{ width:100%; padding:22px; }

.scw-empty__box{
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  row-gap: 10px;
  position: relative;
  overflow: hidden;
  border: 1px dashed var(--scw-border);
  border-radius: 18px;
  min-height: 240px;
  text-align: center;
  padding: 28px 22px;
  background: rgba(0,0,0,.012);
}

.scw-empty__wm{
  display: block;
  width: 75px;
  height: auto;
  margin: 0 auto 6px;
  opacity: .40;
  pointer-events: none;
  user-select: none;
}

.scw-empty__title{
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .2px;
  margin: 4px 0 6px;
}

.scw-empty__hint{
  color: var(--scw-muted);
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
}

/* -------- RESPONSIVE BASE -------- */
@media (max-width: 980px){
  .scw-app{ grid-template-columns: 1fr; }
  .scw-grid{ grid-template-columns: 1fr; }

  .scw-hero__inner{
    flex-direction: column;
    gap: 18px;
  }

  .scw-hero__title{
    font-size: 40px;
    text-align:center;
  }

  .scw-hero__titlewrap{ text-align:center; }
}

/* =========================================================
   MOBILE – SIDEBAR AS OVERLAY (ULTRA SLOW)
   ========================================================= */
@media (max-width: 980px){

  /* Sidebar overlay (closed by default via transform + opacity) */
  .scw-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scw-sidebar-w-mobile);
    max-width: 86vw;
    height: 100vh;
    z-index: 1000;

    background: #fff;
    border-right: 1px solid var(--scw-border);
    box-shadow: 0 22px 60px rgba(0,0,0,.18);

    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;

    transition:
      transform var(--scw-mobile-dur) var(--scw-ease),
      opacity   calc(var(--scw-mobile-dur) * .70) ease;

    will-change: transform, opacity;
  }

  body.sidebar-open .scw-sidebar{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Overlay */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--scw-overlay-dur) ease;
    z-index: 999;
  }

  body.sidebar-open::before{
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========================================================
   FIX iOS/Safari: links dins els filtres/pills
   ========================================================= */

/* Si el pill ÉS un <a class="scw-pill"> ... */
.scw-pill:any-link{
  color: inherit;
  text-decoration: none;
}

/* Si dins del pill hi ha un <a> (p.ex. <span><a>...) */
.scw-pill a:any-link{
  color: inherit;
  text-decoration: none;
}

/* Evita blau/morat de visited específicament (Safari/iOS) */
.scw-pill:visited,
.scw-pill a:visited{
  color: inherit;
}

/* (Opcional però recomanat) evita que Safari “pensi” que és un link i el tenyeixi */
.scw-pill{
  -webkit-text-fill-color: currentColor;
}

/* =========================================================
   SPLASH
   ========================================================= */

body.is-splashing {
  overflow: hidden; /* evita scroll mentre el splash tapa la UI */
}

.scw-splash {
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 99999;
  pointer-events: none; /* no “roba” clicks; és només visual */
  opacity: 1;
  transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* logo */
.scw-splash img{
  display:block;
  max-width: 70vw;
  max-height: 70vh;
  width:auto;
  height:auto;

  opacity: 0;
  transform: scale(0.45);
  animation: scwSplashZoom 4.8s ease-out forwards; /* ~4-5s */
  will-change: transform, opacity;
}

@keyframes scwSplashZoom{
  0%   { opacity: 0; transform: scale(0.45); }
  85%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* quan acabem: fade out i fora */
.scw-splash.is-off {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  body.is-splashing { overflow: auto; }
  .scw-splash img { animation: none; opacity: 1; transform: none; }
  .scw-splash { transition: none; }
}



/* =========================================================
   WORK VIEW (overlay inside index.html)
   ========================================================= */

.scw-content{ position: relative; } /* so work overlay can cover filters + list */

#workView{
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--scw-bg);
  display: none;
  overflow: auto;
}

body.work-open #workView{
  display: block;
  pointer-events: auto;
}

body.work-open .scw-grid{ pointer-events: none; user-select: none; }
body.work-open .scw-grid{ filter: blur(0px); } /* keep crisp; change if you want blur */

/* Work view tokens (mapped to your global palette) */
#workView{
  --bg: var(--scw-bg);
  --text: var(--scw-ink);
  --muted: rgba(0,0,0,.55);
  --border: var(--scw-border);
  --soft: rgba(0,0,0,.03);
  --accent: var(--scw-ink);
}

/* Layout */
#workView .page{
  max-width: clamp(980px, 85vw, 1200px);
  margin: 0 auto;
  padding: 40px 32px 80px;
}

#workView h1{
  font-size: 40px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 200;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

#workView .meta{
  font-size: 14px;
  color: #bbb;
}

#workView #scPlayer{ margin: 14px 0 0; }

#workView .section{
  margin-top: 15px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

#workView .section h2{
  margin: 0 0 18px 0;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text);
}

#workView .section-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 18px 0;
}


#workView .scw-section-icon{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .9;
  flex-shrink: 0;
}

#workView .content-rail{
  max-width: clamp(900px, 82vw, 1180px);
  margin-left: auto;
  margin-right: auto;
}

/* Prose */
#workView .prose{
  max-width: none;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(0,0,0,.72);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
#workView .prose p{ margin: 0 0 14px 0; }
#workView .prose strong{ font-weight: 800; }
#workView .prose ul{ margin: 8px 0 16px 20px; padding: 0; }
#workView .prose li{ margin: 0; }

#workView .breadcrumb{
  margin: -18px 0 22px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
#workView .breadcrumb a{
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
#workView .breadcrumb a:hover{ color: var(--text); }
#workView .breadcrumb .sep{ opacity: .45; }

/* Responsive */
@media (max-width: 768px){
  #workView .page{ padding: 32px 24px 64px; }
}

@media (max-width: 600px){
  #workView .page{ padding: 28px 20px 60px; }
  #workView h1{ font-size: 26px; letter-spacing: .10em; }
}