@charset "utf-8";
/* CSS Document */

.articleContent h1 {margin: 10px 0;}
.articleContent h2 {margin: 5px 0;}

.articleContent {
  padding: 30px 5% 50px 5%;
  background-color: #f9f9f9;
  width: 100%;
  margin: 0 5% 0 5%;  
  border-radius: 13px;
}
/* เบสสไตล์ */
.article-section, .article-2-section, .article-3-section {
  display: grid;
  gap: 10px;
  height: fit-content; /* 100vh;*/
  box-sizing: border-box;
}
.article-3-section{
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "item1";
}
/* Remove extra left and right margins, due to padding */
.article-4-section{
  margin: 20px 0;
}
/* Clear floats after the columns */
.article-4-section:after {
  content: "";
  display: table;
  clear: both;
}
.article-item {
  margin: 10px 0;
  padding: 20px;
  text-align: left;
  height: fit-content; 
  float: left;
}
.column-50 {
  float: left;
  width: 50%;
  padding: 20px; 
}
/* Style the counter cards */
.article-card, .article-2-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 20px;
  background-color: #f1f1f1;
}
.article-card ul { margin: 0 10%;}
.article-card li {
  list-style-type: "🆓";
  padding-inline-start: 1ch;
}
.article-2-card ul { margin: 0 10%;}
.article-2-card li {
  list-style-type: "✔️";
  padding-inline-start: 1ch;
}

/* --- แบบที่ 3: จอเล็ก ≤ 480px --- */
/* เรียงกล่อง 1 → 2 → 3 ในแนวตั้ง */
@media (max-width: 480px) {
  .article-section, .article-2-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "item1"
      "item2"
      "item3";
  }
  .article-2-section {
    grid-template-areas:
      "item1"
      "item3"
      "item2";
  }

  .item1 { grid-area: item1; height: fit-content; }
  .item2 { grid-area: item2; height: fit-content; }
  .item3 { grid-area: item3; height: fit-content; }
  
  .column-50 {
    width: 100%;
    display: block;
    padding: 20px;     
    margin-bottom: 20px;
  }
}

/* --- แบบที่ 2: 481px–1919px --- */
/* กล่อง 1 ซ้าย, กล่อง 2 ขวา, กล่อง 3 ล่างสุดเต็มกว้าง */
@media (min-width: 481px) and (max-width: 1419px) {
  .article-section {
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "item1 item2"
      "item3 item3";
  }
  .article-2-section {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "item1 item1"
      "item2 item3";
  }

  .item1 { grid-area: item1; height: fit-content; }
  .item2 { grid-area: item2; height: fit-content; }
  .item3 { grid-area: item3; height: fit-content; }
}

/* --- แบบที่ 1: จอใหญ่ ≥ 1920px --- */
/* กล่อง 1 ซ้ายสูงเต็ม, กล่อง 2 และ 3 ซ้อนแนวตั้งด้านขวา */
@media (min-width: 1420px) {
  .article-section {
    grid-template-columns: 33.3333% 66.6666%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "item1 item2"
      "item1 item3";
  }
  .article-2-section {
    grid-template-columns: 66.6666% 33.3333%;
    grid-template-rows: 1fr;
    grid-template-areas:
      "item1 item3"
      "item2 item2";
  }

  .item1 { grid-area: item1; height: fit-content; }
  .item2 { grid-area: item2; height: fit-content; }
  .item3 { grid-area: item3; height: fit-content; }
}

.infoContainer li{
  list-style-type: none; /* Remove bullets */
}
.infoContainer {
  width: 100%;  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 0;
}
.infoContainer:after {
  content: "";
  display: table;
  clear: both
}
.infoContainer div {
  padding: 0 20px;
  flex: 1;
  height: fit-content;
}
@media (max-width: 481px) {
  .infoContainer {
    flex-direction: column;
  }
}
.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px;  
  flex-direction: column;
}
.column-33 {
  float: left;
  width: 33.33333%;
  padding: 20px;
  flex-direction: column;
}

.faded-image, .faded-10-5-image {
  position: relative;
  display: inline-block;
}

.faded-image img {
  width: 100%;
  height: auto;
  display: block;

  /* Gradient ไล่ความโปร่งใสจากทุกด้าน */
  mask-image: 
    linear-gradient(to top, transparent, black 10%),
    linear-gradient(to bottom, transparent, black 10%),
    linear-gradient(to left, transparent, black 10%),
    linear-gradient(to right, transparent, black 10%);
  
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;

  /* สำหรับ Safari */
  -webkit-mask-image: 
    linear-gradient(to top, transparent, black 10%),
    linear-gradient(to bottom, transparent, black 10%),
    linear-gradient(to left, transparent, black 10%),
    linear-gradient(to right, transparent, black 10%);
}

.faded-10-5-image img {
  width: 100%;
  height: auto;
  display: block;

  /* Gradient ไล่ความโปร่งใสจากทุกด้าน */
  mask-image: 
    linear-gradient(to top, transparent, black 10%),
    linear-gradient(to bottom, transparent, black 10%),
    linear-gradient(to left, transparent, black 10%),
    linear-gradient(to right, transparent, black 3%);
  
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;

  /* สำหรับ Safari */
  -webkit-mask-image: 
    linear-gradient(to top, transparent, black 10%),
    linear-gradient(to bottom, transparent, black 10%),
    linear-gradient(to left, transparent, black 10%),
    linear-gradient(to right, transparent, black 3%);
}

.btn-seeAllCars {
  background-color: #a12944;
  border: 2px solid #a12944;
  padding: 8px 20px;
  border-radius: 30px;
  color: white;
  font-weight: 500;
  transition: 0.5s ease-in-out;
  margin: 30px 50px;
}
.btn-seeAllCars:hover {
  background-color: #7a1f33;
  border: 2px solid #7a1f33;
}