/* ==========================================================================
   Mariana Rocha — Portfolio
   Recriado a partir do design do Canva "Portfolio MMR 2026".

   COMO FUNCIONA O LAYOUT
   Cada página do Canva tem 1024.5 x 576 "pontos" por tela (16:9).
   Cada tela aqui é um <section class="frame">, e cada elemento dentro dela
   é posicionado com as MESMAS coordenadas do Canva, usando variáveis:

     style="--x:58; --y:42; --w:300; --h:120"   (posição e tamanho, em pontos)
     style="--fs:14"                            (tamanho da fonte, em pontos)

   Tudo escala junto com a largura da tela, igual ao site do Canva.
   ========================================================================== */

/* Fonte original do Canva: Neue Montreal (Pangram Pangram).
   Se você colocar os arquivos em assets/fonts/, ela é usada automaticamente.
   Senão, cai para Inter Tight (Google Fonts), que é bem parecida. */
@font-face {
  font-family: "Neue Montreal";
  src: local("Neue Montreal"), local("NeueMontreal-Regular"),
       url("../fonts/NeueMontreal-Regular.woff2") format("woff2"),
       url("../fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: local("Neue Montreal Bold"), local("NeueMontreal-Bold"),
       url("../fonts/NeueMontreal-Bold.woff2") format("woff2"),
       url("../fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #000000;
  --font: "Neue Montreal", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Páginas escuras (Inside My Mind) */
body.dark { --bg: #000000; --ink: #ffffff; }

/* ---------- Tela 16:9 ---------- */
.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1024.5 / 576;
  overflow: hidden;
  container-type: inline-size;
}
/* Tela que cabe inteira na janela (usada na Home): encolhe para
   caber na altura da tela, centralizada, sem cortar nada. */
.frame.fit {
  width: min(100%, calc((100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1024.5 / 576));
  margin-inline: auto;
}

/* 1 ponto do Canva, em unidades da tela */
.frame * { --u: calc(100cqw / 1024.5); }

/* ---------- Elemento posicionado ---------- */
.el {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
}
.el[style*="--w"] { width: calc(var(--w) * var(--u)); }
.el[style*="--h"] { height: calc(var(--h) * var(--u)); }

/* Imagem simples ocupando a caixa inteira */
img.el, video.el { display: block; object-fit: cover; }

/* Caixa que recorta (como o "frame" do Canva).
   A <img> dentro dela usa coordenadas relativas à caixa. */
.crop { overflow: hidden; }
.crop > img {
  position: absolute;
  display: block;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none;
}
.flip { transform: scaleX(-1); }

/* ---------- Texto ---------- */
.t {
  font-size: calc(var(--fs, 14) * var(--u));
  line-height: 1.24;
  letter-spacing: -0.025em;   /* aproxima a largura da Neue Montreal */
  white-space: nowrap;
}
.t.wrap { white-space: normal; }
.t.up { text-transform: uppercase; }
.t.bold { font-weight: 700; }
.t.white { color: #fff; }
.t.center { transform: translateX(-50%); text-align: center; }
.t.spaced { letter-spacing: 0.14em; }
.t.right { transform: translateX(-100%); }

a { color: inherit; text-decoration: none; }
a.link, .link a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { opacity: .6; }

/* ---------- Home: vídeo sem controles ---------- */
.reel {
  overflow: hidden;
  background: #eee url("../reel-poster.jpg") center / cover no-repeat;
}
.reel video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.reel video::-webkit-media-controls,
.reel video::-webkit-media-controls-panel,
.reel video::-webkit-media-controls-play-button,
.reel video::-webkit-media-controls-start-playback-button,
.reel video::-webkit-media-controls-overlay-play-button,
.reel video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

/* ---------- About: ícones de contato ---------- */
.icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---------- Inside My Mind: paleta de cores ---------- */
.swatch { outline: 1px solid #000; }


/* ==========================================================================
   CELULAR (telas até 700px) — só Home e About mudam de layout.
   Editorials, galerias e Inside My Mind continuam iguais ao computador.
   Inspiração de layout: menu pequeno no topo, imagem grande, nome no rodapé.
   ========================================================================== */
@media (max-width: 700px) {

  /* Tudo que estava posicionado por coordenadas do Canva volta ao fluxo normal */
  .frame.home .el,
  .frame.about .el {
    position: static;
    left: auto; top: auto;
    width: auto; height: auto;
    transform: none;
  }
  .frame.home .t,
  .frame.about .t {
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  /* ---------- HOME ---------- */
  .frame.home {
    width: 100%;
    aspect-ratio: auto;
    height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "about editorials"
      "reel  reel"
      "inside inside";
    row-gap: 14px;
    padding-block: 16px;
    padding-left: max(15px, env(safe-area-inset-left, 0px));
    padding-right: max(15px, env(safe-area-inset-right, 0px));
  }
  .frame.home a[href="about.html"]          { grid-area: about; }
  .frame.home a[href="editorials.html"]     { grid-area: editorials; }
  .frame.home .reel {
    grid-area: reel;
    min-height: 0;
    background: #fff url("../reel-vertical-poster.jpg") center / cover no-repeat;
  }
  .frame.home a[href="inside-my-mind.html"] { grid-area: inside; justify-self: start; }

  /* ---------- ABOUT ---------- */
  .frame.about {
    aspect-ratio: auto;
    min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 16px;
    padding-left: max(15px, env(safe-area-inset-left, 0px));
    padding-right: max(15px, env(safe-area-inset-right, 0px));
  }
  .frame.about > * { order: 3; }             /* contatos, na ordem do HTML */
  .frame.about > a[href="index.html"] { order: 0; margin-bottom: 22px; }
  .frame.about > .crop {
    order: 1;
    width: 68%;
    aspect-ratio: 402 / 385.5;
    margin-bottom: 20px;
  }
  .frame.about > .crop > img {
    position: static;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 68%;
  }
  .frame.about > p.t {
    order: 2;
    white-space: normal;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0;
    max-width: 34em;
    margin-bottom: 36px;
  }
  .frame.about > .icon { display: none; }   /* contatos só em texto, sem ícones */
  .frame.about > a.t,
  .frame.about > span.t {
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
  }
  .frame.about > a.t[href="index.html"] { font-size: 13px; letter-spacing: 0.02em; }

  /* O nome vira o rodapé, pequeno, no fim da tela */
  .frame.about > h1 {
    order: 9;
    margin-top: auto;
    padding-top: 48px;
  }
}