/* CMWR V3.0 · mobile · 03-almanaque */
@media(max-width:900px){
.curiosity-section{height:auto;min-height:100svh;max-height:none;overflow:visible;padding:72px 12px 26px}
.almanaque-frame{position:relative}
.edition-nav{position:relative;top:auto;left:auto;right:auto;margin-bottom:12px}
.edition-nav__button{min-height:36px;padding:.48rem .68rem;font-size:9px}
.almanaque-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:grid;grid-template-columns:1fr;gap:14px;overflow:visible}
.edition-acquire{order:3}
.edition-cover{width:min(78vw,370px);justify-self:center}
.edition-book{width:min(96vw,760px);justify-self:center}
.edition-acquire__button{width:100px;min-height:64px}
}

@media(max-width:900px){
.edition-book__close{
    top:1.2%;
    min-height:28px;
    font-size:8px;
  }
}

@media(max-width:900px){
.edition-cover__open-label{
    left:-10px;
    min-height:72px;
    font-size:8px;
  }
.edition-book__close{
    right:1.2%;
    top:1.2%;
    width:30px;
    min-height:0;
    font-size:20px;
  }
}

@media (max-width:900px){
.curiosity-section{
    position:relative !important;
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    padding:0 !important;
    overflow:hidden !important;
  }
.curiosity-section .almanaque-frame{
    position:absolute !important;
    inset:0 48px 0 0 !important;
    overflow:hidden !important;
  }
/* Nesta primeira edição os controles de edição estão desativados.
     No mobile, escondemos para não gastar altura útil. */
  .curiosity-section .edition-nav{
    display:none !important;
  }
.curiosity-section .almanaque-stage{
    position:absolute !important;
    inset:6px 6px 8px 6px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:72px minmax(0,1fr) !important;
    gap:5px !important;
    align-items:center !important;
    justify-items:center !important;
    overflow:hidden !important;
  }
/* Botão redondo central — topo. */
  .curiosity-section .edition-acquire{
    position:relative !important;
    z-index:30 !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    display:grid !important;
    place-items:center !important;
  }
.curiosity-section .edition-acquire__button{
    width:66px !important;
    height:66px !important;
    min-height:66px !important;
    aspect-ratio:1 !important;
    padding:5px !important;
    border:2px solid rgba(79,218,210,.58) !important;
    border-radius:50% !important;
    display:grid !important;
    grid-template-rows:auto auto !important;
    place-items:center !important;
    align-content:center !important;
    gap:2px !important;
    background:
      radial-gradient(circle at 35% 28%,rgba(41,115,111,.30),transparent 42%),
      linear-gradient(180deg,rgba(3,22,24,.96),rgba(2,10,13,.98)) !important;
    color:#d8f4ec !important;
    box-shadow:
      inset 0 0 11px rgba(76,217,210,.10),
      0 0 0 1px rgba(0,0,0,.72),
      0 6px 16px rgba(0,0,0,.38) !important;
    font:900 6px/1 Arial,sans-serif !important;
    letter-spacing:.045em !important;
  }
.curiosity-section .edition-acquire__icon{
    width:auto !important;
    aspect-ratio:auto !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    color:#efbf56 !important;
    font:900 17px/.95 "Arial Black",Arial,sans-serif !important;
    letter-spacing:-.03em !important;
  }
.curiosity-section .edition-acquire__button:hover,
  .curiosity-section .edition-acquire__button:focus-visible{
    background:
      radial-gradient(circle at 35% 28%,rgba(52,153,146,.36),transparent 42%),
      linear-gradient(180deg,rgba(4,34,36,.98),rgba(2,12,15,.99)) !important;
    outline:2px solid rgba(239,191,86,.60) !important;
    outline-offset:2px !important;
  }
/* Capa e livro usam exatamente a mesma área. */
  .curiosity-section .edition-cover,
  .curiosity-section .edition-book{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
  }
.curiosity-section .edition-cover{
    width:min(
      calc(100vw - 76px),
      calc((100dvh - 100px) * .672)
    ) !important;
    max-height:calc(100dvh - 94px) !important;
    aspect-ratio:589/876 !important;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.40)) !important;
  }
.curiosity-section .edition-cover__button{
    width:100% !important;
    height:100% !important;
  }
/* Quando a revista abre no celular, a capa sai e entra uma página. */
  .curiosity-section:not(.is-book-closed) .edition-cover{
    display:none !important;
  }
.curiosity-section .edition-book{
    width:min(
      calc(100vw - 76px),
      calc((100dvh - 100px) * .672)
    ) !important;
    max-height:calc(100dvh - 94px) !important;
    aspect-ratio:589/876 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.40)) !important;
  }
.curiosity-section .edition-book__paper--left{
    grid-column:1 !important;
    display:block !important;
    border-radius:3.8% 3.8% 4.4% 4.4% !important;
    box-shadow:
      inset 12px 0 20px rgba(84,47,23,.09),
      inset -12px 0 20px rgba(71,40,22,.09) !important;
  }
.curiosity-section .edition-book__paper--right,
  .curiosity-section .edition-book__spine{
    display:none !important;
  }
.curiosity-section .edition-page-content{
    inset:4.5% 5.2% 5.3% !important;
    gap:2.4% !important;
  }
.curiosity-section .page-label{
    font-size:clamp(13px,4.2vw,19px) !important;
  }
.curiosity-section .article-feature{
    grid-template-columns:1fr !important;
    grid-template-rows:38% 1fr !important;
    gap:3% !important;
    min-height:45% !important;
  }
.curiosity-section .article-copy h3,
  .curiosity-section .article-card h3{
    font-size:clamp(9px,2.8vw,13px) !important;
  }
.curiosity-section .article-copy p,
  .curiosity-section .article-card p{
    font-size:clamp(6.5px,2.05vw,9px) !important;
    line-height:1.18 !important;
  }
.curiosity-section .article-link{
    font-size:clamp(6px,1.85vw,8px) !important;
  }
.curiosity-section .article-list{
    grid-template-columns:1fr 1fr !important;
    gap:3% !important;
  }
.curiosity-section .page-footer{
    font-size:clamp(5.5px,1.65vw,7.5px) !important;
  }
/* Setas ficam sobre a página e nunca fora da janela. */
  .curiosity-section .page-turn{
    top:50% !important;
    width:32px !important;
    border-width:1px !important;
    font-size:25px !important;
  }
.curiosity-section .page-turn--prev{
    left:2.2% !important;
  }
.curiosity-section .page-turn--next{
    right:2.2% !important;
  }
.curiosity-section .page-count{
    bottom:1.7% !important;
    font-size:7px !important;
  }
.curiosity-section .edition-book__close{
    right:2.0% !important;
    top:1.8% !important;
    width:29px !important;
    font-size:19px !important;
  }
.curiosity-section .edition-cover__open-label{
    left:-8px !important;
    min-height:68px !important;
    font-size:7.5px !important;
  }
}

@media (max-width:900px){
.curiosity-section.is-book-closed .edition-cover{
    display:block !important;
  }
.curiosity-section.is-book-closed .edition-book{
    display:none !important;
  }
.curiosity-section:not(.is-book-closed) .edition-cover{
    display:none !important;
  }
.curiosity-section:not(.is-book-closed) .edition-book{
    display:grid !important;
  }
}

@media (max-width:900px){
/* O fundo continua sendo uma imagem da própria sessão,
     apenas mais legível para a revista não parecer flutuar. */
  .curiosity-section{
    background:#19110f !important;
  }
.curiosity-section .almanaque-fog{
    inset:-4% !important;
    filter:blur(13px) saturate(.82) brightness(.78) !important;
    transform:scale(1.08) !important;
    opacity:.96 !important;
  }
.curiosity-section .almanaque-fog::after{
    background:
      radial-gradient(circle at 48% 46%,rgba(185,104,58,.28),transparent 45%),
      linear-gradient(180deg,rgba(15,9,8,.06),rgba(15,9,8,.17) 68%,rgba(31,17,12,.30)),
      linear-gradient(90deg,rgba(0,0,0,.17),transparent 23% 77%,rgba(0,0,0,.17)) !important;
  }
/* EDIÇÕES ocupa o topo da revista no celular. */
  .curiosity-section .edition-acquire{
    position:relative !important;
  }
.curiosity-section .edition-library-open{
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    min-width:66px !important;
    height:30px !important;
    padding:0 10px !important;
    border:1px solid rgba(78,215,208,.44) !important;
    border-radius:15px !important;
    background:rgba(3,20,22,.90) !important;
    color:#bceee7 !important;
    box-shadow:inset 0 0 9px rgba(74,216,210,.07),0 4px 10px rgba(0,0,0,.24) !important;
    font:900 7px/1 Arial,sans-serif !important;
    letter-spacing:.09em !important;
    cursor:pointer !important;
  }
.curiosity-section .edition-library-open:hover,
  .curiosity-section .edition-library-open:focus-visible{
    border-color:#efbf56 !important;
    color:#f2d28d !important;
    outline:none !important;
  }
/* Janela do arquivo */
  .edition-library-dialog{
    width:min(calc(100vw - 66px),410px) !important;
    max-width:none !important;
    padding:0 !important;
    border:1px solid rgba(75,211,203,.34) !important;
    border-radius:14px !important;
    background:rgba(8,15,16,.94) !important;
    color:#efe1bd !important;
    box-shadow:0 22px 54px rgba(0,0,0,.60),inset 0 0 24px rgba(48,122,118,.07) !important;
  }
.edition-library-dialog::backdrop{
    background:rgba(0,0,0,.46) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
  }
.edition-library-card{
    gap:10px !important;
    padding:17px 13px 14px !important;
  }
.edition-library-card h3{
    font-size:clamp(22px,6.5vw,30px) !important;
  }
.edition-years{
    display:flex !important;
    gap:7px !important;
    padding-bottom:7px !important;
    border-bottom:1px solid rgba(215,178,110,.18) !important;
  }
.edition-year{
    min-width:54px !important;
    height:27px !important;
    padding:0 9px !important;
    border:1px solid rgba(82,207,199,.22) !important;
    border-radius:14px !important;
    background:rgba(4,12,14,.72) !important;
    color:rgba(203,239,232,.52) !important;
    font:900 8px/1 Arial,sans-serif !important;
  }
.edition-year.is-active{
    border-color:rgba(235,187,87,.72) !important;
    color:#f0cf8b !important;
    background:rgba(77,44,24,.52) !important;
  }
.edition-year:disabled{
    opacity:.32 !important;
  }
.edition-library-strip{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:96px !important;
    gap:10px !important;
    overflow-x:auto !important;
    padding:3px 2px 10px !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:thin !important;
  }
.edition-library-item{
    scroll-snap-align:start !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#eadab7 !important;
    text-align:left !important;
  }
.edition-library-thumb,
  .edition-library-placeholder{
    display:block !important;
    width:100% !important;
    aspect-ratio:589/876 !important;
    overflow:hidden !important;
    border:1px solid rgba(221,184,111,.38) !important;
    border-radius:5px !important;
    background:linear-gradient(160deg,#342218,#17100d) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.30) !important;
  }
.edition-library-thumb img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
  }
.edition-library-placeholder{
    display:grid !important;
    place-items:center !important;
    color:rgba(238,203,137,.48) !important;
    font:900 18px/1 "Arial Black",Arial,sans-serif !important;
    letter-spacing:.02em !important;
  }
.edition-library-item strong{
    display:block !important;
    margin-top:5px !important;
    font:900 8px/1 Arial,sans-serif !important;
    color:#ead09b !important;
  }
.edition-library-item small{
    display:block !important;
    margin-top:2px !important;
    font:600 7px/1 Arial,sans-serif !important;
    color:rgba(226,214,190,.55) !important;
  }
.edition-library-item.is-current .edition-library-thumb{
    outline:2px solid rgba(75,216,207,.65) !important;
    outline-offset:2px !important;
  }
.edition-library-item:disabled{
    opacity:.46 !important;
  }
.edition-library-detail{
    display:grid !important;
    gap:2px !important;
    padding:9px 10px !important;
    border:1px solid rgba(80,207,199,.15) !important;
    border-radius:8px !important;
    background:rgba(3,11,13,.48) !important;
  }
.edition-library-detail strong{
    color:#e5bd6e !important;
    font:900 9px/1 Arial,sans-serif !important;
  }
.edition-library-detail span{
    color:rgba(235,225,202,.68) !important;
    font:600 8px/1.2 Arial,sans-serif !important;
  }
.edition-library-card .edition-dialog__ok{
    justify-self:stretch !important;
    min-height:38px !important;
    border-radius:19px !important;
    text-align:center !important;
  }
}

@media (max-width:900px){
.curiosity-section{
    background:
      linear-gradient(
        180deg,
        rgba(22,25,16,.05) 0%,
        rgba(28,24,16,.03) 56%,
        rgba(24,16,12,.10) 100%
      ),
      url("../../assets/img/sessao03-fundo-outono.webp")
      center center / cover no-repeat !important;
  }
/* A camada antiga usava a revista ampliada e escurecia o cenário.
     No mobile ela sai para o novo fundo aparecer de verdade. */
  .curiosity-section .almanaque-fog{
    display:none !important;
  }
}

@media(max-width:900px){
.curiosity-section .article-feature--text{display:block!important;min-height:45%!important}
}
