/*
Theme Name: Seba Sereno — Azurio
Theme URI: https://sebasereno.com.ar/
Author: Seba Sereno
Author URI: https://sebasereno.com.ar/
Description: Portfolio WordPress dinámico para Seba Sereno, basado visualmente en la plantilla Azurio provista por el propietario. Incluye proyectos, categorías con layouts seleccionables, blog y animaciones.
Version: 0.3.0
Text Domain: seba-sereno
*/

/* Ajustes propios del theme. El sistema visual base vive en assets/css/main.css */
.admin-bar .mxd-menu__contain { top: 32px; }
@media (max-width: 782px) { .admin-bar .mxd-menu__contain { top: 46px; } }

.ss-brand-wordmark {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  color: currentColor;
  text-decoration: none;
}
.ss-hero-role { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.ss-no-image {
  width:100%; aspect-ratio: 16 / 10; display:grid; place-items:center;
  background: linear-gradient(135deg,#171717,#303030); color:#fff;
  font: 600 1rem/1.3 "JetBrains Mono", monospace; text-transform:uppercase;
}
.ss-project-meta { display:flex; flex-wrap:wrap; gap:.5rem; }
.ss-project-single__hero { padding-top: 12rem; }
.ss-project-single__meta { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1rem; margin:2rem 0 4rem; }
.ss-project-single__meta > div { border-top:1px solid currentColor; padding-top:1rem; }
.ss-project-single__gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.ss-project-single__gallery img { width:100%; height:auto; display:block; }
.ss-blog-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:2rem; }
.ss-blog-card img { width:100%; aspect-ratio: 16 / 10; object-fit:cover; }
.ss-blog-card h2 { margin-top:1rem; }
.ss-contact-strip { padding: 9rem 0; }
.ss-contact-strip a { text-decoration:none; }
@media (max-width: 991px) {
  .ss-project-single__meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ss-project-single__gallery,.ss-blog-grid { grid-template-columns:1fr; }
}


/* v0.2 — Logo configurable */
.ss-brand-logo {
  display: inline-flex;
  align-items: center;
  width: min(var(--ss-logo-width, 180px), 70vw);
  line-height: 0;
}
.ss-brand-logo__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84px;
  object-fit: contain;
  object-position: left center;
}
.ss-brand-logo__img--dark { display: none; }
[color-scheme="dark"] .ss-brand-logo__img--light:has(+ .ss-brand-logo__img--dark) { display: none; }
[color-scheme="dark"] .ss-brand-logo__img--dark { display: block; }
.ss-brand-text { display:flex; flex-direction:column; line-height:1.05; }
.ss-brand-text > span:last-child { font-size:.55em; font-weight:500; letter-spacing:0; margin-top:.25rem; }

/* v0.2 — Portfolio: proporción controlada para que screenshots verticales no creen cards gigantes */
.mxd-project-item__media {
  aspect-ratio: var(--ss-project-ratio, 16 / 10);
  width: 100%;
  background: var(--base-tint);
}
.mxd-project-item__media img,
.mxd-project-item__media .mxd-img-anim__main,
.mxd-project-item__media .mxd-img-anim__absolute {
  width: 100%;
  height: 100% !important;
  object-fit: var(--ss-project-fit, cover) !important;
  object-position: var(--ss-project-position, top) center !important;
}
.mxd-project-item__media .mxd-img-anim__main {
  position: absolute;
  inset: 0;
}
.mxd-project-item__media .ss-no-image {
  position:absolute;
  inset:0;
  aspect-ratio:auto;
  height:100%;
}

@media (max-width: 767px) {
  .ss-brand-logo { width: min(var(--ss-logo-width, 180px), 52vw); }
  .mxd-project-item { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* v0.3 — identidad, media editable y correcciones */
.ss-brand-logo { width:min(var(--ss-logo-width,180px),70vw); }
.ss-brand-logo__img { max-height:64px; object-fit:contain; object-position:left center; }
.ss-brand-logo__img--dark { display:none; }
html[color-scheme="dark"] .ss-brand-logo__img--light { display:none; }
html[color-scheme="dark"] .ss-brand-logo__img--dark { display:block; }
.mxd-menu__logo .ss-brand-logo__img { max-height:86px; }

.ss-menu-image {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:8%;
  background:#0f0f0f;
}
.ss-hero-image {
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  border-radius:1.2rem;
}
.mxd-loader__images img { object-fit:contain; }

@media(max-width:767px){
  .ss-brand-logo__img{max-height:52px}
}

/* v0.4 — editable services */
.ss-service-card .card-description{z-index:2;color:#fff;}
.ss-service-card .card-description p{color:#fff;}
.ss-service-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#171717,#343434);color:#fff;}
.ss-service-placeholder span{font:600 1.2rem/1 var(--_font-accent);opacity:.55;}
.ss-service-placeholder strong{font:700 clamp(2rem,5vw,5rem)/1 var(--_font-default);text-align:center;max-width:80%;}