/* ============================================================
   galleries.css — static layout for the recovered site
   Replaces the parts the Cargo JS engine used to compute at runtime:
   block layout for <bodycopy>, the numeric grid, gallery image layout,
   and the marquee. (Without the engine these need explicit CSS.)
   ============================================================ */

/* <bodycopy> is a custom element (defaults to display:inline), so its
   content_padding wouldn't indent block children. Make it a block. */
bodycopy{ display:block; }

/* ---- Grid ----
   Content authored grid widths as [grid-col="N"] (N of 12) and spacing as
   [grid-gutter]/[grid-pad] on a pixel scale the engine recomputed. Foundation
   maps those attrs onto a rem scale (e.g. [grid-gutter="10"]{margin:-5rem}),
   which overflows without the engine. So: neutralize foundation's gutter and
   define our own simple, predictable grid. */
[grid-row]{ margin:0 !important; width:auto !important; }
[grid-gutter]{ margin:0 !important; }
[grid-col]{ box-sizing:border-box; padding:0 8px !important; }
[grid-col="1"]{width:8.3333%}  [grid-col="2"]{width:16.6667%}
[grid-col="3"]{width:25%}      [grid-col="4"]{width:33.3333%}
[grid-col="5"]{width:41.6667%} [grid-col="6"]{width:50%}
[grid-col="7"]{width:58.3333%} [grid-col="8"]{width:66.6667%}
[grid-col="9"]{width:75%}      [grid-col="10"]{width:83.3333%}
[grid-col="11"]{width:91.6667%}[grid-col="12"]{width:100%}

/* ---- Mobile: stack columns + galleries to 1 column, smaller type, calm marquee
   (Cargo used a reduced base size and single-column galleries on phones). ---- */
@media (max-width:700px){
  html{ font-size:11px; }
  [grid-col]{ width:100% !important; }
  .gallery-freeform .gcard{ width:100% !important; }
  .gallery-justify img{ width:100% !important; height:auto !important; flex:none !important; }
  .marquee{ white-space:normal !important; overflow:visible !important; }
  .marquee > *{ animation:none !important; position:static !important; transform:none !important;
    display:block !important; white-space:normal !important; font-size:2.4rem !important; }
}

/* ---- Typography base ----
   Cargo sets a FIXED root font-size; every size in base.css is in rem and derives
   from it. Matching it makes body=2rem=26.27px, h1=3rem=39.4px, h2=4rem, small=1.6rem
   render exactly like Cargo (the browser default 16px made everything ~22% too big). */
html{ font-size:13.1328px; }

/* Content images fit their container (Cargo applies this; without it the full-res
   originals overflow and the column shows only a cropped corner). */
.page_content img{ max-width:100%; height:auto; }

/* ---- Galleries (rebuilt from each gallery's real Cargo config) ---- */
.gallery{ --gap:6px; margin:.2rem 0; }
.gallery img{ display:block; max-width:100%; }
.gallery .gcard{ margin:0; }

/* Freeform: each card keeps the % width Cargo stored per image; cards flow+wrap. */
.gallery-freeform{ display:flex; flex-wrap:wrap; align-items:flex-start; }
.gallery-freeform .gcard{ box-sizing:border-box; padding:calc(var(--gap)/2); }
.gallery-freeform .gcard img{ width:100%; height:auto; }

/* Justify: equal-height rows that fill the width; a lone image stays modest. */
.gallery-justify{ display:flex; flex-wrap:wrap; gap:var(--gap); align-items:flex-start; }
.gallery-justify img{ height:300px; width:auto; flex:1 1 auto; object-fit:cover; }
.gallery-justify img:only-child{ height:auto; width:auto; max-width:420px; flex:0 0 auto; object-fit:contain; }

/* Slideshow: one image per view, horizontal scroll-snap carousel.
   gallery.js wraps it in .slideshow-wrap and adds arrows + autoplay. */
.slideshow-wrap{ position:relative; }
.gallery-slideshow{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  gap:var(--gap); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gallery-slideshow::-webkit-scrollbar{ display:none; }
.gallery-slideshow .gcard{ flex:0 0 100%; scroll-snap-align:center; }
.gallery-slideshow .gcard img{ width:100%; height:auto; max-height:80vh; object-fit:contain; margin:0 auto; }
.gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; border:0;
  background:rgba(255,255,255,.7); color:#000; font:1.6rem/1 sans-serif; width:1.8em; height:1.8em;
  border-radius:50%; cursor:pointer; opacity:0; transition:opacity .2s; }
.slideshow-wrap:hover .gallery-arrow{ opacity:1; }
.gallery-arrow.prev{ left:.3rem; } .gallery-arrow.next{ right:.3rem; }

/* ---- Marquee: Cargo bounced these section titles back and forth across the
   width (behavior="bounce"). Reproduce the bounce; respect reduced-motion. ---- */
.marquee{ overflow:hidden !important; white-space:nowrap !important; }
.marquee > *{ display:inline-block; margin:0; position:relative; left:0;
  animation:marquee-bounce 9s ease-in-out infinite alternate; }
@keyframes marquee-bounce{ to{ left:100%; transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){
  .marquee > *{ animation:none; left:50%; transform:translateX(-50%); } }

video{ max-width:100%; height:auto; }

/* páginas que en cargo iban "fijadas" (pin fixed): la barra del tfg */
.pinned-fixed{position:fixed;right:0;bottom:0;z-index:10;background:rgba(255,255,255,.85)}
.pinned-fixed .content_padding{padding:.6rem 1rem!important}
/* pin "bottom + overlay" de cargo: el menú se apoya sobre el final de la página (selector de idioma, menú de proyectos) */
.main_container{position:relative}
.pinned-overlay{position:absolute;left:0;right:0;bottom:0;z-index:5}
/* fondo de cada página (en cargo: .page_background, pintado por el css local de la página) */
.page:where(:not(.pinned-overlay,.pinned-fixed)){position:relative}
.page{isolation:isolate}
.page>.page_background{z-index:-1}