/* =========================================================
   JWL — cloud.html page specific styles
   Builds on: style.css + jline.css + system.css
   ========================================================= */

/* ---------- Hero bg override (purple-blue tone) ---------- */
.page-cloud .jp-hero::before {
  background-image: url("../../img/jigyo01-010.jpg");
  opacity: 0.18;
  filter: brightness(0.7) contrast(1.05) saturate(0.88);
}
.page-cloud .jp-hero::after {
  background:
    radial-gradient(ellipse 70% 50% at 75% 40%, rgba(139,92,246,0.12), transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 70%, rgba(59,130,246,0.09), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(5,7,13,0.95) 100%);
}

/* ---------- Platforms (3-card layout) ---------- */
.platforms-lead {
  max-width: 820px;
  color: var(--text-2);
  line-height: 1.95;
  margin-bottom: 42px;
  font-size: clamp(14px, 1vw, 15.5px);
}
.platforms-lead strong { color: var(--text); font-weight: 600; }

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.platform-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.platform-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.platform-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  opacity: 0.6;
  z-index: 2;
}
.platform-cloud::before { opacity: 1; height: 4px; }

.platform-head {
  padding: 32px 28px 22px;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--border);
}
.platform-tag {
  align-self: flex-start;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(59,130,246,0.12);
  color: var(--accent-2);
  border: 1px solid rgba(59,130,246,0.25);
  margin-bottom: 6px;
}
.platform-onprem .platform-tag {
  background: rgba(148,163,184,0.1);
  color: #cbd5e1;
  border-color: rgba(148,163,184,0.25);
}
.platform-hybrid .platform-tag {
  background: rgba(20,184,166,0.1);
  color: var(--accent-3);
  border-color: rgba(20,184,166,0.25);
}
.platform-head h3 {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 2px 0 0;
}
.platform-lead {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.7;
}

.platform-img {
  position: relative;
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.platform-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.95) contrast(1.04);
  transition: transform .6s ease;
}
.platform-card:hover .platform-img img { transform: scale(1.04); }
.platform-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5,7,13,0.72) 100%);
}

.platform-body {
  padding: 24px 28px 28px;
  display: flex; flex-direction: column;
  gap: 16px;
  flex: 1;
}
.platform-body > p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.9;
}
.platform-body > p strong { color: var(--text); font-weight: 600; }

.platform-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}
.platform-features li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}
.platform-features li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platform-head { padding: 26px 22px 20px; }
  .platform-body { padding: 22px 22px 24px; }
}