/* ==========================================================
   雲啟數位 icloud-start — 共用自適應樣式表
   Shared responsive stylesheet for all main site pages.
   Uses fluid clamp()-based sizing + wrapping flex layouts so the
   site adapts smoothly from small phones up to desktop without
   relying on a long list of fixed breakpoints.
   ========================================================== */

:root{
  --brand:#004080;
  --brand-dark:#003366;
  --accent:#0077cc;
  --text:#222;
  --bg:#f5f7fa;
  --border:#eef2f6;
  --radius:10px;
  --container-w:clamp(320px, 88vw, 1440px);
  --gutter:6%;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:Arial,Helvetica,sans-serif;
  margin:0;
  padding:0;
  color:var(--text);
  line-height:1.6;
  background:var(--bg);
  font-size:clamp(15px,0.6vw + 13px,20px);
}

img{ max-width:100%; height:auto; }

/* ---------- Header ---------- */
header{
  background:var(--brand);
  color:#fff;
  padding:clamp(28px,6vw,60px) var(--gutter);
}

header h1{
  font-size:clamp(22px,3vw + 14px,40px);
  margin:0 0 8px;
  line-height:1.3;
}

header p{
  margin:0;
  font-size:clamp(14px,0.8vw + 12px,20px);
}

/* ---------- Nav ---------- */
nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  background:var(--brand-dark);
  padding:16px var(--gutter);
  row-gap:12px;
}

nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:clamp(15px,0.5vw + 13px,19px);
  white-space:nowrap;
}

nav a:hover{ text-decoration:underline; }

/* ---------- Page container ---------- */
.container,
.wrap{
  max-width:var(--container-w);
  margin:clamp(14px,3vw,28px) auto;
  padding:clamp(16px,3vw,32px);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 6px 30px rgba(0,0,0,0.06);
}

h2{
  color:var(--brand);
  font-size:clamp(20px,1.4vw + 16px,30px);
}
h3{ font-size:clamp(16px,0.6vw + 14px,20px); }

/* ---------- Hero (homepage) ---------- */
.hero{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
}
.hero .text{ flex:1; min-width:260px; }
.hero h1{
  font-size:clamp(24px,2.8vw + 16px,40px);
  color:var(--brand);
  margin:0 0 8px;
}
.hero p{ margin:0 0 12px; }

/* ---------- Card grid (expertise / eSIM features) ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}
.card{
  border:1px solid var(--border);
  padding:16px;
  border-radius:8px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:10px 16px;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}
.btn:hover{ opacity:.9; }

/* ---------- eSIM highlight section (homepage) ---------- */
.esim-flex{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
  margin-bottom:8px;
}
.esim-badge{
  display:inline-block;
  background:#e8f4ff;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:10px;
}
.esim-cta{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ---------- Services page ---------- */
.service{
  border:1px solid var(--border);
  padding:16px;
  border-radius:8px;
  margin-bottom:12px;
}
.service ul{ margin:8px 0 0 20px; padding:0; }
.note{
  background:#f0f8ff;
  padding:10px;
  border-left:4px solid var(--accent);
  border-radius:6px;
}
.note-warn{
  background:#fff8e6;
  border-left:4px solid #ffb300;
  padding:10px;
  border-radius:6px;
}

/* ---------- About page ---------- */
.two-col{ display:flex; gap:24px; flex-wrap:wrap; }
.col{ flex:1; min-width:260px; }

/* ---------- Solutions page ---------- */
.row{ display:flex; gap:18px; flex-wrap:wrap; }
.box{ flex:1 1 240px; min-width:240px; border:1px solid #eef3f8; padding:14px; border-radius:8px; }

/* ---------- Portfolio page ---------- */
.case{
  border:1px solid #eef3f8;
  padding:16px;
  border-radius:8px;
  margin-bottom:12px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.case img{
  width:clamp(220px, 22vw, 320px);
  max-width:100%;
  height:180px;
  object-fit:cover;
  border-radius:6px;
  flex-shrink:0;
}
.case > div{ flex:1 1 220px; min-width:220px; }

/* ---------- Contact page ---------- */
.contact-list p{ margin:6px 0; }

/* ---------- Footer ---------- */
footer{
  background:#222;
  color:#fff;
  padding:16px var(--gutter);
  margin-top:30px;
}
footer a{ color:#fff; }

/* ---------- Small-screen refinements ---------- */
@media (max-width:640px){
  .container,
  .wrap{ margin:12px auto; border-radius:0; }
  .hero{ flex-direction:column; align-items:stretch; }
  .case{ flex-direction:column; }
  .case img{ width:100%; height:auto; aspect-ratio:16/10; }
  nav{ justify-content:center; }
}