/* work.css — extracted template styles for work.php (from 260113_webdesign/style.css)
   Purpose: ensure work.php displays like the template without uploading the entire 260113_webdesign folder.
*/
:root {
  --mono-900: #111111;
  --mono-800: #1d1d1d;
  --mono-700: #2d2d2d;
  --mono-100: #f4f4f4;
  --mono-050: #fcfcfc;
  --pastel-pink: #f3bdd7;
  --pastel-green: #a7d676;
  --pastel-blue: #bfe4ff;
  --header-height: 110px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--mono-900);
  background:
    radial-gradient(circle at 10% 0%, rgba(243, 189, 215, 0.35), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(167, 214, 118, 0.3), transparent 42%),
    radial-gradient(circle at 60% 100%, rgba(191, 228, 255, 0.3), transparent 35%),
    var(--mono-050);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(17,17,17,0.15);
  backdrop-filter: blur(8px);
  background: rgba(252,252,252,0.88);
}

.header-inner { width: min(1200px, 92vw); min-height: var(--header-height); margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo-link img { height:80px; display:block; border-radius:12px; }
.primary-nav ul { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.primary-nav a { display:inline-block; padding:10px 14px; border-radius:999px; font-size:0.95rem; background: rgba(17,17,17,0.04); }
.kebab-wrapper { position:relative; }
.kebab-button { width:42px; height:42px; border-radius:50%; border:1px solid rgba(17,17,17,0.3); background:white; display:grid; place-content:center; }

/* Carousel */
.carousel { position: relative; overflow: hidden; border-radius: 30px; background:#111; box-shadow:0 18px 34px rgba(17,17,17,0.15); }
.carousel-viewport { overflow:hidden; }
.carousel-track { display:flex; transform:translateX(0); transition: transform 0.55s ease; }
.carousel-slide { min-width:100%; margin:0; }
.carousel-slide img { width:100%; height: clamp(420px, 72vh, 680px); object-fit:cover; display:block; }
.carousel-button { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background: rgba(255,255,255,0.14); color:#fff; }
.carousel-button.prev { left:16px; }
.carousel-button.next { right:16px; }
.carousel-dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; padding:8px 10px; border-radius:999px; background: rgba(17,17,17,0.3); }
.carousel-dot { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.42); }
.carousel-dot.is-active { background: var(--pastel-green); }

/* Template copy and details */
.template-breadcrumb { margin-bottom:16px; padding:8px 12px; width:fit-content; border-radius:999px; background: rgba(17,17,17,0.08); border:1px solid rgba(17,17,17,0.12); }
.template-breadcrumb ol { display:flex; gap:8px; margin:0; padding:0; list-style:none; color:#fff; font-size:0.8rem; }
.template-hero { width: min(1200px, 92vw); margin:16px auto 0; display:grid; gap:18px; }
.template-hero-copy { display:grid; gap:8px; padding:0 6px; }
.template-hero-copy h1 { margin:0; font-family:"Outfit", sans-serif; font-size: clamp(2rem, 4vw, 3.6rem); }
.template-details { width: min(1200px, 92vw); margin:34px auto 10px; }
.template-detail-grid { margin-top:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.template-detail-card { padding:24px; border-radius:22px; background:#fff; border:1px solid rgba(17,17,17,0.12); box-shadow:0 10px 24px rgba(17,17,17,0.06); }
.template-detail-card.wide { grid-column: 1 / -1; }
.work-link-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.work-link-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border-radius:999px; background:var(--mono-900); color:#fff; font-weight:700; box-shadow:0 8px 18px rgba(17,17,17,0.12); transition:transform 0.2s ease, background 0.2s ease; }
.work-link-button:hover { transform:translateY(-2px); background:var(--mono-700); }

@media (max-width: 980px) {
  .template-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --header-height: 92px; }
  .primary-nav { display:none; }
  .template-breadcrumb { margin-bottom:12px; padding:6px 10px; }
}

/* Small helpers */
.hero-kicker { margin:0; font-size:0.9rem; letter-spacing:0.14em; color:var(--pastel-green); }

.hero-subtitle { margin: 6px 0 0; color: var(--mono-700); font-size: 1.05rem; }

/* Scroll to top button */
.scroll-top-button {
  position: fixed;
  right: 18px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid rgba(17,17,17,0.12);
  box-shadow: 0 8px 20px rgba(17,17,17,0.08);
  cursor: pointer;
  z-index: 1200;
}

.scroll-top-button svg { width: 20px; height: 20px; color: var(--mono-800); }

/* Footer tweaks to match template look */
.site-footer { margin-top:80px; padding:46px 0 20px; color:var(--mono-100); background: linear-gradient(130deg, rgba(243,189,215,0.15), transparent 38%), linear-gradient(250deg, rgba(191,228,255,0.14), transparent 35%), var(--mono-900); }