/* Products Section */
.product-section {
  padding: 80px 40px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  margin-top: 40px;
}

.job-section {
  padding: 80px 40px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  margin-top: 40px;
  margin-top: 160px;
  margin-left: 0px;
  margin-right: 0px;
}

.product-title {
  text-align: center;
  font-size: 42px;
  background: linear-gradient(135deg, #f4c430 0%, #ffb700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  padding-bottom: 60px;
  font-weight: 700;
  letter-spacing: 1px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Ensure cards align at the top and allow consistent row heights on wide screens */
.product-grid{align-items:start;grid-auto-rows:minmax(1fr, auto)}

.product-card {
  background: linear-gradient(135deg, rgba(20, 30, 48, 0.9), rgba(15, 25, 40, 0.95));
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 25px rgba(0, 212, 255, 0.4);
  border-color: rgba(0, 212, 255, 0.6);
}

.product-header {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  align-items: center;
}

.product-img {
  width: 220px;
  height: 220px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(0, 212, 255, 0.25);
  flex-shrink: 0;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  transform-origin: center center;
  display: block;
  margin: 0 auto;
}

.product-card:hover .product-img {
  transform: scale(1.12);
  box-shadow: 0 12px 30px rgba(0,212,255,0.35);
  filter: brightness(1.06);
  border-color: rgba(0,212,255,0.8);
}

.product-info h3 {
  font-size: 18px;
  margin: 0 0 4px 0;
  font-weight: 700;
}

/* Gradient product name */
.product-info h3 a,
.product-info h3{
  display: inline-block;
  background: linear-gradient(135deg, #f4c430 0%, #ffb700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease, text-shadow .18s ease;
}

.product-info{ text-align:center; margin-top:8px }

.product-title {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.product-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-text-en,
.product-text-ja {
  font-size: 14px;
  color: #ffffff; /* force white for readability */
  line-height: 1.7;
  margin: 0;
  font-style: italic;
  border-left: 3px solid rgba(0, 212, 255, 0.3);
  padding-left: 16px;
  transition: all 0.3s ease;
}

.product-card:hover .product-text-en,
.product-card:hover .product-text-ja {
  color: #ffffff; /* remain white on hover */
  border-left-color: rgba(0, 212, 255, 0.8);
}

.product-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}

@media (max-width: 900px) {
  .product-section {
    padding: 60px 20px;
  }

  .product-title {
    font-size: 32px;
  }

  .product-grid {
    gap: 24px;
  }

  .product-card {
    padding: 24px;
  }

  .product-pagination .btn[aria-disabled="true"], .product-pagination .btn.disabled{ opacity:.6; pointer-events:none; transform:none; background:linear-gradient(90deg,#e0d2a0,#d4b153); color:#08313a }
  .product-pagination .btn.disabled{ cursor:default }
}

/* Additional responsive tweaks for tablets and mobiles */
@media (max-width: 900px) 
{
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .product-header{flex-direction:column; align-items:center; text-align:center}
  .product-img{width:160px;height:160px}
  .product-info h3{margin-top:10px}
  .product-text-en, .product-text-ja{font-size:15px}
}

@media (max-width: 480px){
  .product-grid{grid-template-columns:1fr}
  .product-img{width:120px;height:120px}
}
/* keep small-screen tweaks */
@media (max-width: 480px){
  .hero-centered{padding:40px 14px}
  .centered-title{font-size:26px}
  .core-header h2{font-size:22px}
  .core-card{padding:16px}
  .quality-card{min-height: auto}
  .product-title{font-size:24px;margin-bottom:32px}
  .product-text-en, .product-text-ja{font-size:14px;padding-left:12px}
}

/* Filters and pagination styling for product page */
.product-filters{
  display:flex;
  gap:12px;
  align-items:center;
  margin:18px auto;
  max-width:1200px;
}
.product-filters input[type="search"]{padding:8px;flex:1;border-radius:6px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.9);color:#000}
.product-filters select{padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.9);color:#000}
.product-filters button{padding:8px 12px;border-radius:6px;border:0;background:linear-gradient(90deg,#00d4ff,#00a3ff);color:#072229;cursor:pointer}

.no-products{grid-column:1/-1;padding:20px;text-align:center;color:#fff}

.product-pagination{margin-top:18px;display:flex;justify-content:center;gap:12px;align-items:center}
.product-pagination .page-info{color:#fff}

/* Prev / Next button styles */
.product-pagination .btn{
  padding:8px 14px;
  border-radius:8px;
  border:0;
  background:linear-gradient(90deg,#ffb700,#f4c430);
  color:#072229;
  font-weight:700;
  box-shadow:0 6px 18px rgba(244,196,48,0.18);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.product-pagination .btn:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(244,196,48,0.22); }
.product-pagination .btn[aria-disabled="true"], .product-pagination .btn.disabled{ opacity:.6; pointer-events:none; transform:none; background:linear-gradient(90deg,#e0d2a0,#d4b153); color:#08313a }
.product-pagination .btn.disabled{ cursor:default }

/* Stack filters nicely on small screens */
@media (max-width:520px){
  .product-filters{display:flex;flex-direction:column;gap:10px;padding:0 12px}
  .product-filters input[type="search"], .product-filters select, .product-filters button{width:100%}
  .product-filters button{max-width:none}
}

/* product detail modal uses the same styles as index content-modal */
.content-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:9998;padding:18px;align-items:center;justify-content:center}
.content-modal.show{display:flex}
.content-modal .modal-content{background:#0f1720;color:#fff;max-width:1000px;width:100%;border-radius:10px;padding:24px;position:relative}
/* reinforce dark background for application modal too */
#applicationModal .modal-content{background:#0f1720;color:#fff;}
/* force white text for all elements inside application modal */
#applicationModal .modal-content *,
#applicationModal .modal-content label,
#applicationModal .modal-content .file-list { color: #fff !important; }
#applicationModal .modal-content input,
#applicationModal .modal-content textarea { background:#1c2430; border-color:#344050; color:#fff; }
#applicationModal .modal-content input::placeholder,
#applicationModal .modal-content textarea::placeholder { color:#ccc; }
.content-modal .modal-close{position:absolute;top:12px;right:14px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}
.content-modal .modal-body{display:flex;gap:18px;margin-top:12px}
.content-modal .modal-column{flex:1}
.content-modal .modal-column h3{margin-top:0;color:#00d4ff}

/* Gradient modal title */
#modalTitle{
  background: linear-gradient(135deg, #f4c430 0%, #ffb700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

@media (max-width:900px){
  .content-modal .modal-body{flex-direction:column}
}

/* Image modal (full-view) */
.image-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:9999;align-items:center;justify-content:center;padding:20px}
.image-modal.open{display:flex}
.image-modal .modal-image{max-width:calc(100% - 40px);max-height:calc(100% - 40px);object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,0.6)}
.image-modal .close-modal{position:absolute;top:18px;right:22px;color:#fff;font-size:34px;cursor:pointer;opacity:0.95}
.image-modal .close-modal:hover{opacity:1}

@media (max-width:600px){
  .image-modal .modal-image{max-width:95vw;max-height:85vh}
  .image-modal .close-modal{font-size:28px;right:14px;top:12px}
}

/* Ensure single-column product list on narrow mobile devices */
@media (max-width:600px) {
  .product-grid{grid-template-columns:1fr !important; gap:20px}
  .product-card{padding:18px}
  .product-section{padding:40px 12px}
  .job-section{padding:40px 12px}
  .product-filters{padding:0 12px}
  .product-filters input[type="search"], .product-filters select, .product-filters button{width:100%}
  .product-pagination{flex-direction:column;gap:10px}
  .product-pagination .btn{width:100%;max-width:none;justify-content:center}
}

/* Desktop responsiveness tweaks */
@media (min-width: 1200px) {
  .product-grid { max-width: 1400px; gap: 36px; }
  .product-card { padding: 36px; }
  .product-img { width: 240px; height: 240px; }
  .product-info h3 { font-size: 20px; }
}

@media (min-width: 1600px) {
  .product-grid { max-width: 1600px; gap: 40px; }
  .product-card { padding: 42px; }
  .product-img { width: 280px; height: 280px; }
  .product-info h3 { font-size: 22px; }
}