/*
Theme Name: Igor Fontes Portfólio
Description: Tema de portfólio com galeria na home, página de projeto e página Sobre. Os projetos são cadastrados no menu "Projetos" do painel.
Author: Igor Fontes
Version: 1.0
Text Domain: igor-fontes
*/
:root{--bg:#fff;--fg:#000;--accent:#b6ff00;--pad:11px;--gap:5px;--r:6px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:'Figtree',system-ui,sans-serif;font-size:20px;line-height:1.3;transition:background .2s,color .2s}
body.dark{--bg:#000;--fg:#fff}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.site-header{display:flex;justify-content:space-between;align-items:center;padding:10px var(--pad) 8px;gap:12px;flex-wrap:wrap}
.logo{display:block;color:var(--fg)}
.logo-svg{height:26px;width:auto;display:block;fill:currentColor}
.site-nav{display:flex;gap:16px;font-weight:500;font-size:20px}
.site-nav a:hover,.site-nav a:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* Home */
.grid{display:grid;gap:var(--gap);padding:0 var(--pad)}
.row{display:grid;gap:var(--gap);height:clamp(260px,30vw,440px)}
.row.a{grid-template-columns:2fr 1fr}
.row.b{grid-template-columns:1fr 2fr}
.row.solo{grid-template-columns:2fr 1fr;height:auto}
.row.solo .card{aspect-ratio:16/10}
.card{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:#ccc}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover img{transform:scale(1.03)}
.card .t{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 16px;color:#fff;font-size:22px;font-weight:500;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);opacity:0;transition:opacity .25s}
.card:hover .t,.card:focus-visible .t{opacity:1}
@media (hover:none){.card .t{opacity:1;font-size:18px}}
@media (max-width:700px){
  .row,.row.a,.row.b,.row.solo{grid-template-columns:1fr;height:auto}
  .card,.row.solo .card{aspect-ratio:4/5}
  .logo-svg{height:20px}
  .site-nav{font-size:18px;gap:12px}
}
.empty{padding:40px var(--pad);font-weight:300}

/* Projeto */
.project{padding:36px var(--pad) 0;max-width:1100px;margin:0 auto}
.project h1{margin:0 0 14px;font-size:34px;font-weight:500;letter-spacing:-.02em;padding:0 4px}
.project .entry-content>p{margin:0 0 1.2em;padding:0 4px;max-width:44rem;font-weight:300;font-size:19px}
.project .entry-content>p:last-of-type{margin-bottom:32px}
.entry-content figure,.entry-content .wp-block-image,.entry-content .wp-block-video,.entry-content .wp-block-gallery,.entry-content .wp-block-embed{margin:0 0 var(--gap);max-width:none}
.project img,.project video,.project iframe{display:block;width:100%;height:auto;border-radius:var(--r)}
.project .wp-block-gallery{gap:var(--gap)}
.project figcaption{font-size:15px;font-weight:300;padding:6px 4px 10px}

/* Sobre e demais páginas */
.about{display:grid;grid-template-columns:minmax(0,34rem) 1fr;gap:56px;padding:72px 7vw 40px;align-items:start}
.about.no-image{grid-template-columns:minmax(0,34rem)}
.about h1{margin:0 0 28px;font-weight:400;font-size:44px;color:var(--accent);letter-spacing:-.01em}
.about .entry-content p{margin:0 0 1.4em;max-width:28em;font-weight:300}
.about .entry-content strong,.about .entry-content b{font-weight:600}
.about .entry-content a{font-weight:600}
.portrait{border-radius:var(--r);background:#f1f1f1;aspect-ratio:1/1;width:100%;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:800px){.about{grid-template-columns:1fr;padding:56px 20px 30px;gap:40px}.about h1{font-size:40px}}

.site-footer{display:flex;justify-content:space-between;align-items:flex-end;padding:70px 20px 22px;font-size:17px}
.site-footer button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:6px;margin:-6px}
.site-footer button:hover{text-decoration:underline}
.top-face{height:44px;display:block}
.top-face svg{height:100%;width:auto;display:block;transition:transform .3s}
.top-face:hover svg{transform:rotate(-12deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}