/*
Theme Name: Mayseven Studio
Theme URI: https://mayseven-studio.com
Author: Ryusuke Kuranishi
Description: Portfolio theme for mayseven studio — editor, director, writer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mayseven
*/

/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#1a1a1a;background:#fff;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}

/* ===== LAYOUT ===== */
.container{max-width:1100px;margin:0 auto;padding:0 48px;}

@media(max-width:768px){
  .container{padding:0 24px;}
}

/* ===== NAVIGATION ===== */
.site-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 48px;border-bottom:1px solid #f0f0f0;
  position:sticky;top:0;background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);z-index:100;
}
.site-logo{font-size:18px;font-weight:700;letter-spacing:-0.5px;}
.site-logo span{font-weight:300;color:#888;}
.nav-links{display:flex;gap:28px;}
.nav-links a{font-size:14px;font-weight:500;color:#888;transition:color 0.2s;}
.nav-links a:hover,.nav-links a.current{color:#1a1a1a;}

/* Mobile nav */
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:4px;cursor:pointer;}
.nav-toggle span{width:20px;height:2px;background:#1a1a1a;transition:0.2s;}

@media(max-width:768px){
  .site-nav{padding:16px 24px;}
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:#fff;padding:20px 24px;
    border-bottom:1px solid #f0f0f0;gap:16px;
  }
  .nav-links.open{display:flex;}
}

/* ===== HERO ===== */
.hero{padding:80px 0 60px;max-width:700px;}
.hero h1{
  font-size:36px;font-weight:800;line-height:1.4;
  margin-bottom:16px;letter-spacing:-0.5px;
}
.hero p{font-size:16px;line-height:1.8;color:#666;margin-bottom:24px;}
.hero-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#1a1a1a;
  border-bottom:2px solid #1a1a1a;padding-bottom:2px;
  transition:opacity 0.2s;
}
.hero-cta:hover{opacity:0.7;}

@media(max-width:768px){
  .hero{padding:48px 0 36px;}
  .hero h1{font-size:26px;}
  .hero p{font-size:14px;}
}

/* ===== MEDIA STRIP ===== */
.media-strip{
  display:flex;gap:12px;align-items:center;justify-content:center;
  padding:40px 0;border-top:1px solid #f0f0f0;flex-wrap:wrap;
}
.media-filter{
  font-size:13px;font-weight:700;color:#ccc;letter-spacing:0.5px;
  white-space:nowrap;padding:6px 16px;border-radius:20px;
  border:1px solid transparent;transition:all 0.2s;cursor:pointer;
  background:none;
}
.media-filter:hover{color:#888;border-color:#e0e0e0;}
.media-filter.active{color:#1a1a1a;border-color:#1a1a1a;}

@media(max-width:768px){
  .media-strip{gap:8px 10px;padding:28px 0;}
  .media-filter{font-size:11px;padding:5px 12px;}
}

/* ===== SECTIONS ===== */
.section{padding:60px 0;}
.section-border{border-top:1px solid #f0f0f0;}
.section-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:32px;
}
.section-title{
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;color:#999;
}

@media(max-width:768px){
  .section{padding:40px 0;}
}

/* ===== FEATURED WORKS ===== */
.featured-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.featured-grid .work-card .work-thumb{aspect-ratio:16/9;}
.featured-grid .work-card .work-title{font-size:16px;}

@media(max-width:768px){
  .featured-grid{grid-template-columns:1fr;gap:16px;}
}

/* ===== TABS ===== */
.work-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap;}
.work-tab{
  font-size:13px;font-weight:600;padding:8px 18px;border-radius:24px;
  border:1px solid #ddd;color:#888;background:#fff;
  transition:all 0.2s;cursor:pointer;
}
.work-tab:hover{border-color:#aaa;color:#555;}
.work-tab.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}

/* ===== WORKS GRID ===== */
.works-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}

@media(max-width:960px){.works-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.works-grid{grid-template-columns:1fr;}}

/* ===== WORK CARD ===== */
.work-card{
  border-radius:10px;overflow:hidden;
  border:1px solid #f0f0f0;
  transition:box-shadow 0.25s,transform 0.25s;
}
.work-card:hover{
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}
.work-card a{display:block;}
.work-thumb{
  aspect-ratio:16/10;overflow:hidden;
  background:#f0f0f0;position:relative;
}
.work-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.3s;
}
.work-card:hover .work-thumb img{transform:scale(1.03);}

/* Fallback when no image */
.work-thumb-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;
  text-align:center;padding:16px;line-height:1.4;
}

.work-info{padding:14px 16px;}
.work-media{
  font-size:11px;font-weight:700;color:#999;
  text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;
}
.work-title{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;}
.work-tags{display:flex;gap:6px;flex-wrap:wrap;}
.work-type{
  font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;
  background:#f5f5f5;color:#777;
}

/* ===== ABOUT ===== */
.about-row{
  display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start;
}
.about-photo{
  width:100%;aspect-ratio:1;border-radius:10px;
  overflow:hidden;background:#f0f0f0;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-content h2{font-size:24px;font-weight:700;margin-bottom:16px;}
.about-content p{font-size:15px;line-height:1.8;color:#555;margin-bottom:16px;}
.about-skills{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.about-skill{
  font-size:12px;font-weight:500;padding:6px 14px;border-radius:6px;
  background:#f5f5f5;color:#555;
}

@media(max-width:768px){
  .about-row{grid-template-columns:1fr;gap:24px;}
  .about-photo{max-width:200px;}
  .about-content h2{font-size:20px;}
}

/* ===== CONTACT ===== */
.contact-section{
  padding:60px 0;background:#fafafa;border-top:1px solid #f0f0f0;
  text-align:center;
}
.contact-section h2{font-size:22px;font-weight:700;margin-bottom:12px;}
.contact-section p{font-size:15px;color:#888;margin-bottom:24px;}
.contact-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 32px;background:#1a1a1a;color:#fff;
  border-radius:8px;font-size:14px;font-weight:600;
  transition:opacity 0.2s;
}
.contact-btn:hover{opacity:0.8;}
.contact-socials{
  display:flex;gap:20px;justify-content:center;margin-top:20px;
  font-size:13px;
}
.contact-socials a{color:#888;transition:color 0.2s;}
.contact-socials a:hover{color:#1a1a1a;}

/* Contact Form 7 styling */
.wpcf7{max-width:500px;margin:32px auto 0;text-align:left;}
.wpcf7 label{display:block;font-size:13px;font-weight:600;color:#555;margin-bottom:4px;}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:6px;
  font-size:14px;margin-bottom:16px;font-family:inherit;
  transition:border-color 0.2s;
}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:#1a1a1a;outline:none;}
.wpcf7 input[type="submit"]{
  background:#1a1a1a;color:#fff;border:none;padding:12px 32px;
  border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  transition:opacity 0.2s;
}
.wpcf7 input[type="submit"]:hover{opacity:0.8;}

/* ===== FOOTER ===== */
.site-footer{
  padding:24px 48px;border-top:1px solid #f0f0f0;
  display:flex;justify-content:space-between;
  font-size:12px;color:#bbb;
}

@media(max-width:768px){
  .site-footer{padding:20px 24px;flex-direction:column;gap:4px;}
}

/* ===== UTILITY ===== */
.hidden{display:none!important;}