/* Acervo Mamonas — compatibilidade de CSS para navegadores antigos
   ---------------------------------------------------------------------------
   Este arquivo é ADITIVO. Ele é carregado ANTES das folhas de estilo do site,
   de propósito: cada regra aqui é o plano B, e a regra de grid que vem depois
   sobrescreve no navegador que entende grid.

   Como funciona: quando o navegador não entende `display:grid`, ele descarta
   aquela declaração e fica com a última que ele entende — que é a de flexbox
   abaixo. No navegador moderno, as duas são aplicadas e a de grid vence, porque
   vem depois na cascata.

   Sem `@supports` de propósito: `@supports` chegou depois que o flexbox já
   resolvia o caso, e browsers muito velhos simplesmente ignorariam o bloco.

   Alvo completo: Chrome 49, Firefox 52 ESR, MyPal 68, Nocturne, Supermium e
   navegadores atuais. Versoes antigas do MyPal que nao entendem as bases do
   layout, Internet Explorer, Netscape e Netsurf vao para a edicao leve.  */

/* ---- coluna de tres: menu lateral, conteudo, ficha a direita ---- */
.wordmark{font:italic 900 48px/1 Impact,'Arial Black','Franklin Gothic Heavy',sans-serif}
.layout{display:flex;flex-wrap:nowrap;align-items:flex-start}
.layout>.sidebar{flex:0 0 174px}
.layout>.page-main{flex:1 1 auto;min-width:0}
.layout>.rail{flex:0 0 218px}
@media(max-width:1120px){
  .layout{flex-wrap:wrap}
  .layout>.sidebar{flex:0 0 150px}
  .layout>.page-main{flex:1 1 auto}
  .layout>.rail{flex:1 1 100%}
}
@media(max-width:820px){
  .layout{display:block}
  .layout>.sidebar,.layout>.page-main,.layout>.rail{flex:none;width:auto}
}

/* ---- duas colunas iguais ---- */
.cuidado-imagens,
.ficha-tecnica-container,
.utopia-grid,
.bad-story-grid{display:flex;flex-wrap:wrap;margin:-7px}
.cuidado-imagens>*,
.ficha-tecnica-container>*,
.utopia-grid>*,
.bad-story-grid>*{flex:1 1 280px;margin:7px}
@media(max-width:600px){.cuidado-imagens>*{flex:1 1 100%}}
@media(max-width:650px){.bad-story-grid>*{flex:1 1 100%}}
@media(max-width:820px){.ficha-tecnica-container>*{flex:1 1 100%}}
@media(max-width:820px){.utopia-grid>*{flex:1 1 100%}}

/* ---- coluna fixa + coluna que cresce ---- */
.sobre-cd-intro,
.bad-document{display:flex;flex-wrap:wrap;align-items:flex-start}
.onon-grid{display:flex;flex-wrap:wrap;align-items:flex-start}
.sobre-cd-intro>*:first-child{flex:0 0 250px}
.sobre-cd-intro>*:last-child{flex:1 1 300px}
.bad-document{align-items:center}
.bad-document>*:first-child{flex:0 0 230px}
.bad-document>*:last-child{flex:1 1 260px}
.onon-grid>*{flex:1 1 300px}
@media(max-width:768px){.sobre-cd-intro>*{flex:1 1 100%}}
@media(max-width:650px){.bad-document>*{flex:1 1 100%}}

/* ---- listas que se auto-ajustam (minmax) ---- */
.concert-day-grid,
.concert-photos,
.concert-documents,
.lg-grid{display:flex;flex-wrap:wrap;margin:-8px}
.concert-day-grid>*{flex:1 1 240px;margin:8px}
.concert-photos>*{flex:1 1 200px;margin:8px}
.concert-documents>*{flex:1 1 230px;margin:8px}
.lg-grid>*{flex:1 1 170px;margin:8px}
@media(max-width:520px){.concert-photos>*{flex:1 1 100%}}
@media(max-width:420px){.concert-day-grid>*{flex:1 1 100%}}
@media(max-width:600px){.lg-grid>*{flex:1 1 100%}}

/* ---- ficha tecnica da Utopia: 1fr e 1.5fr ---- */
.utopia-tech>div{display:flex;flex-wrap:wrap}
.utopia-tech>*,
.utopia-tech>div>*{flex:1 1 220px}

/* ---- centralizar conteudo: flex faz isso em qualquer navegador ---- */
.lg-video-icon{display:flex;align-items:center;justify-content:center}
.lg-dialog,.concert-dialog{width:90%;max-width:920px}

/* Firefox 52 ESR (Windows XP) nao tem <dialog>. O compat.js marca o elemento
   e estas regras o transformam numa janela rolavel acima da pagina. */
dialog:not([open]){display:none}
dialog[data-compat-dialog][open]{display:block;position:fixed;left:3%;right:3%;top:3%;bottom:auto;width:90%;max-width:920px;max-height:90%;margin:0 auto;overflow:auto;z-index:9999;background:#fdf6dd;color:#2a1c07}

/* aspect-ratio ainda nao existia. A altura mantem o player utilizavel. */
.concert-player iframe{height:405px}
.onon-video iframe{height:315px}
@media(max-width:700px){.concert-player iframe{height:52vw;max-height:405px}}