/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 29 Sep 2025, 2:37 am
*/

/***********************************************************
 * FooGallery Panel (fg-*) — v4.2
 * - Móvil: layout por columnas (Imagen flex) → Caption auto → Thumbs fijas
 * - Botones: SOLO la X (cerrar) arriba-derecha
 ***********************************************************/

/* ===== Variables (móvil) ===== */
@media (max-width: 768px){
  :root{
    /* alto miniaturas; el caption será auto-altura */
    --fg-thumb-h: 62px;
    --fg-safe: max(env(safe-area-inset-bottom), 0px);
    --fg-pad: 12px;
  }
}

/* ===== Panel en columna a pantalla completa ===== */
@media (max-width: 768px){
  img{ height:auto !important; }

  .fg-panel{
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100svh;
    background: rgba(0,0,0,.92);
    padding-bottom: var(--fg-safe);
    overflow: hidden;
  }
}
@supports not (height: 100svh){
  @media (max-width: 768px){ .fg-panel{ height: 100dvh; } }
}
@supports not (height: 100dvh){
  @media (max-width: 768px){ .fg-panel{ height: 100vh; } }
}

/* ===== Área CONTENIDO (imagen) ===== */
@media (max-width: 768px){
  .fg-panel .fg-panel-area.fg-panel-content{ order: 1; flex: 1 1 auto !important; min-height:0 !important; }
  .fg-panel .fg-panel-area-inner.fg-panel-content-inner{
    height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important;
  }
  .fg-panel .fg-media{
    width:100vw !important; max-width:100vw !important;
    height:100% !important; max-height:100% !important;
    display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important;
  }
  .fg-panel .fg-media-image .fg-media-content{
    width:auto !important; height:auto !important; max-width:100vw !important; max-height:100% !important; object-fit:contain !important;
  }
  .fg-panel .fg-media-image .fg-media-content.fg-media-full-height{ height:auto !important; }
}

/* ===== Área INFO (caption) — AUTO ALTURA, sin cortar ===== */
@media (max-width: 768px){
  .fg-panel .fg-panel-area.fg-panel-info{
    order:2; display:block !important; flex: 0 0 auto !important; /* altura auto */
  }
  .fg-panel .fg-panel-area-inner.fg-panel-info-inner{
    width:100%; box-sizing:border-box;
    padding:10px var(--fg-pad) 12px !important;
    background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.18), rgba(0,0,0,0));
    color:#fff; font-size:14px; line-height:1.25;
  }
  .fg-panel .fg-media-caption-title{
    font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .fg-panel .fg-media-caption-description{
    margin-top:2px; font-size:13px; opacity:.9;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .fg-panel .fg-panel-area-toggle.fg-panel-info-toggle{ display:none !important; }
}

/* ===== Área THUMBS (miniaturas) ===== */
@media (max-width: 768px){
  .fg-panel .fg-panel-area.fg-panel-thumbs{
    order:3; display:block !important; flex: 0 0 var(--fg-thumb-h) !important;
    background: rgba(0,0,0,.18);
    box-shadow: 0 -1px 0 rgba(255,255,255,.05), 0 -6px 10px rgba(0,0,0,.18);
    overflow: hidden;
  }
  .fg-panel .fg-panel-area-inner.fg-panel-thumbs-inner{
    height:100% !important; padding:6px var(--fg-pad) !important; box-sizing:border-box;
  }
  .fg-panel .fg-panel-thumbs-viewport{ height:100% !important; }
  .fg-panel .fg-panel-thumbs-stage{ height:100% !important; display:flex; align-items:center; }
  .fg-panel .fg-panel-thumb{
    height:100% !important; min-width:64px; margin-right:8px; display:flex; align-items:center;
  }
  .fg-panel .fg-panel-thumb-image{
    height: calc(100% - 2px) !important; width:auto !important; border-radius:8px; object-fit:cover;
  }
  .fg-panel .fg-panel-thumb-caption{ display:none !important; }
  .fg-panel .fg-panel-thumbs-button{ display:none !important; } /* sin flechas en móvil */
}

/* ===== BOTONES: SOLO la X (cerrar) arriba-derecha ===== */
@media (max-width: 768px){
  /* Oculta todos los botones por defecto… */
  .fg-panel .fg-panel-button{ display:none !important; }
  /* …menos el de cerrar */
  .fg-panel .fg-panel-button-close{
    display:inline-flex !important; align-items:center; justify-content:center;
    position:absolute; top:8px; right:8px;
    width:36px; height:36px; padding:6px; border:0; border-radius:999px;
    z-index: 5; pointer-events:auto;
    background:rgba(0,0,0,.55); backdrop-filter:saturate(120%) blur(2px);
    touch-action:manipulation;
  }
  /* Icono siempre visible en blanco */
  .fg-panel .fg-panel-button-close svg path,
  .fg-panel .fg-panel-button-close svg circle,
  .fg-panel .fg-panel-button-close svg rect,
  .fg-panel .fg-panel-button-close svg polygon,
  .fg-panel .fg-panel-button-close svg line {
    fill:#fff !important; stroke:#fff !important;
  }
  /* Feedback en pulsación sin “círculo blanco” */
  .fg-panel .fg-panel-button-close:active{ transform:scale(.96); background:rgba(255,255,255,.18); }
}

/* ===== Desktop/tablet suaves ===== */
@media (min-width: 769px){
  .fg-panel .fg-panel-thumbs-inner{ padding:8px 0 !important; }
  .fg-panel .fg-panel-thumb-image{ border-radius:8px; }
  .fg-panel .fg-panel-button{ width:40px; height:40px; padding:8px; }
}