/* =========================================================
   BLOG THEME — El Faro Studios
   Se carga DESPUÉS de styles-base.css y styles-faro.css
   ========================================================= */

/* --- Contenedor principal del post --- */
#post {
    max-width: 900px;
    margin: 0 auto;
  }
  
  /* --- Hero (portada) --- */
  #post-hero.post-hero {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2rem;
    margin: 0 0 1.2rem 0;
    object-fit: cover;
  }
  
  /* --- Título --- */
  #post-title.post-title {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 .4rem 0;
  }
  
  /* --- Subtítulo con look de H2 (sin tocar el HTML) --- */
  #post-subtitle.post-subtitle {
    /* Visualmente como H2 */
    font-family: 'GandhiSans', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    margin: 0 0 .6rem 0;
    color: inherit;
  }
  
  /* --- Meta: cada ítem en su propio renglón, sin cambiar JS --- */
  #post-meta.post-meta {
    font-family: 'GandhiSans', sans-serif;
    font-size: .95rem;
    opacity: .9;
    margin: 0 0 1.2rem 0; /* espacio con el contenido */
    line-height: 1.35;
  }
  
  /* El JS inyecta "•" entre ítems dentro de .dot; aquí lo usamos para saltos de línea */
  #post-meta .dot {
    /* Ocultamos el punto y lo reemplazamos por un salto de línea controlado */
    color: transparent;
    display: inline;
    font-size: 0;
  }
  #post-meta .dot::before {
    content: "\A";         /* newline */
    white-space: pre;       /* respeta el salto */
    display: inline;
    font-size: 0;           /* que no deje altura extra */
  }
  
  /* --- Separador (--- en Markdown) --- */
  .post-content hr {
    border: 0;
    height: 2px;
    background: #2D2D2D; /* mismo “negro” del sitio */
    opacity: 1;
    margin: 1.5rem 0;
  }
  
  /* --- Tipografía general del contenido --- */
  .post-content {
    font-family: 'GandhiSans', sans-serif;
    font-size: 1.06rem;
    line-height: 1.65;
    color: inherit;
  }
  
  /* Encabezados dentro del contenido */
  .post-content h2 {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    margin: 1.4rem 0 .6rem;
  }
  .post-content h3 {
    font-family: 'GandhiSans', sans-serif;
    font-weight: bold;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    margin: 1.2rem 0 .4rem;
  }
  
  /* Párrafos y listas */
  .post-content p { margin: 0 0 1rem 0; }
  .post-content ul,
  .post-content ol {
    margin: 0 0 1rem 1.2rem;
    padding: 0;
  }
  .post-content li { margin: .25rem 0; }
  
  /* Imágenes del contenido */
  .post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 2rem;     /* pedido */
    margin: .6rem 0 1rem 0;
  }
  
  /* Iframes responsivos (YouTube, mapas, etc.) */
  .post-content iframe {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;  /* ajustar si necesitas otra relación */
    border: 0;
    border-radius: 1rem;
    margin: .6rem 0 1rem;
  }
  
  /* Blockquotes */
  .post-content blockquote {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-left: 4px solid #2D2D2D;
    background: rgba(0,0,0,0.04);
    border-radius: .5rem;
  }
  .post-content blockquote p:last-child { margin-bottom: 0; }
  
  /* Código inline y bloques */
  .post-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    background: rgba(0,0,0,.06);
    padding: .15rem .35rem;
    border-radius: .4rem;
  }
  .post-content pre code {
    display: block;
    padding: 1rem;
    border-radius: .8rem;
    overflow-x: auto;
  }
  
  /* Tablas */
  .post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .98rem;
  }
  .post-content th,
  .post-content td {
    border: 1px solid rgba(0,0,0,.12);
    padding: .6rem .7rem;
    text-align: left;
  }
  .post-content thead th {
    background: rgba(0,0,0,.05);
    font-weight: bold;
  }
  .post-content tbody tr:nth-child(odd) {
    background: rgba(0,0,0,.02);
  }
  
  /* Details/summary (colapsables) */
  .post-content details {
    margin: .8rem 0 1rem;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: .8rem;
    padding: .6rem .8rem;
    background: rgba(0,0,0,.02);
  }
  .post-content details[open] {
    background: rgba(0,0,0,.04);
  }
  .post-content summary {
    cursor: pointer;
    font-weight: bold;
  }
  
  /* Firma al final */
  #post-sign.post-sign {
    margin-top: 1.4rem;
    font-size: .95rem;
    opacity: .8;
  }
  
  /* --- Responsive tweaks --- */
  @media (max-width: 798px) {
    #post { padding: 0 .8rem; }
    .post-content { font-size: 1rem; line-height: 1.6; }
  }