@import url("fonts.css");

/* ============================================================
   KVG Skiathos — company details
   ============================================================ */
:root {
  --bg:        #f4f6f8;
  --paper:     #ffffff;
  --ink:       #101a22;
  --ink-2:     #1d2a34;
  --body:      #4a5763;
  --muted:     #66727d;
  --brand:     #12607f;
  --brand-deep:#0c4459;
  --brand-soft:#e4f0f5;
  --line:      #dde4ea;
  --line-soft: #eaeff3;

  --shadow-sm: 0 1px 2px rgba(16,26,34,.05), 0 2px 8px rgba(16,26,34,.05);
  --shadow-md: 0 4px 16px rgba(16,26,34,.07), 0 18px 50px rgba(16,26,34,.08);

  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.15rem, 5vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* A sideways-scrollable page drags fixed elements out of view on phones. */
  overflow-x: clip;
}
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--body);
  font-family: var(--sans); font-size: 1rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -.025em; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
.skip-link { position:absolute; left:1rem; top:-100px; z-index:200; background:var(--brand); color:#fff; padding:.7rem 1.1rem; border-radius:var(--radius); font-size:.875rem; font-weight:600; text-decoration:none; transition:top .2s var(--ease); }
.skip-link:focus { top:1rem; color:#fff; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap { width:100%; max-width:940px; margin-inline:auto; padding-inline:var(--gutter); }

/* ---------------- Header ---------------- */
.site-header { background:var(--ink); color:#fff; padding-block:1.1rem; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.mark { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.mark .badge { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:var(--brand); color:#fff; font-family:var(--display); font-weight:800; font-size:.82rem; letter-spacing:.02em; }
.mark .name { font-family:var(--display); font-weight:700; font-size:1.02rem; color:#fff; letter-spacing:-.015em; }
.header-tel { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:.92rem; color:#fff; text-decoration:none; }
.header-tel svg { width:16px; height:16px; stroke:#7cc4dd; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.header-tel:hover { color:#7cc4dd; }

/* ---------------- Hero ---------------- */
.hero { background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color:#c3ced8; padding-block: clamp(2.75rem,7vw,4.5rem) clamp(3.5rem,9vw,6rem); }
.hero .eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:#7cc4dd; margin-bottom:1rem; }
.hero .eyebrow::before { content:""; width:24px; height:2px; background:#7cc4dd; }
.hero h1 { color:#fff; font-size:clamp(1.7rem,4.6vw,2.9rem); max-width:20ch; }
.hero p { margin-top:1rem; max-width:56ch; font-size:clamp(.98rem,1.3vw,1.08rem); }

/* ---------------- Card ---------------- */
main { flex:1; }
.panel { margin-top:calc(clamp(3.5rem,9vw,6rem) * -0.55); margin-bottom:clamp(3rem,7vw,5rem); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.card-head { padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.5rem,3.5vw,2.5rem); border-bottom:1px solid var(--line-soft); }
.card-head h2 { font-size:clamp(1.15rem,2.4vw,1.5rem); }
.card-head p { margin-top:.4rem; font-size:.9rem; color:var(--muted); }

.rows { list-style:none; margin:0; padding:0; }
.row { display:grid; grid-template-columns:minmax(160px, 15rem) 1fr; gap:.4rem 1.5rem; padding:1.05rem clamp(1.5rem,3.5vw,2.5rem); border-top:1px solid var(--line-soft); }
.row:first-child { border-top:0; }
.row dt { font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding-top:.18rem; }
.row dd { margin:0; color:var(--ink); font-size:1rem; font-weight:500; overflow-wrap:anywhere; }
.row dd .sub { display:block; font-size:.85rem; font-weight:400; color:var(--muted); margin-top:.15rem; }
.row dd a { font-weight:600; text-decoration:none; }
.row dd a:hover { text-decoration:underline; }
.row .num { font-variant-numeric:tabular-nums; letter-spacing:.01em; }
@media (max-width:640px) { .row { grid-template-columns:1fr; padding-block:.95rem; } }

.card-foot { padding:1.15rem clamp(1.5rem,3.5vw,2.5rem); background:var(--brand-soft); border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:.7rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.8rem 1.5rem; border-radius:var(--radius); border:1px solid transparent; font-family:var(--display); font-size:.875rem; font-weight:700; text-decoration:none; cursor:pointer; transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); }
.btn:hover { transform:translateY(-1px); }
.btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary { background:var(--brand); color:#fff; }
.btn--primary:hover { background:var(--brand-deep); color:#fff; }
.btn--outline { border-color:var(--brand); color:var(--brand); background:transparent; }
.btn--outline:hover { background:var(--brand); color:#fff; }

/* ---------------- Footer ---------------- */
.site-footer { background:var(--ink); color:#8595a2; padding-block:1.6rem; font-size:.82rem; }
.footer-inner { display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; align-items:center; justify-content:space-between; }
.site-footer a { color:#adbcc7; }
.site-footer a:hover { color:#fff; }

@media print {
  .skip-link, .card-foot { display:none !important; }
  body { background:#fff; }
  .site-header, .hero, .site-footer { background:#fff !important; color:#000 !important; }
  .hero h1, .mark .name { color:#000 !important; }
  .panel { margin-top:2rem; }
  .card { box-shadow:none; }
}

/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }