/* 類型	實際用法
BASE	        body / a
LAYOUT	      container / row
SECTION	      .section-product
COMPONENT	    .product-card
UTILITY	      text-center mb-4 

寫法	意義	用途
__	元素（element）	結構的一部分
--	修飾（modifier）	改變外觀

  /* =========================================================
      BASE
     引入 GenSenRounded2TW-B.otf
  ========================================================= */

@font-face {
  font-family: "GenSenRounded2TW";
  src: url("fonts/GenSenRounded2TW-R.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* 全站套用 */
body {
  font-family: "GenSenRounded2TW", sans-serif;
  background-color: #ffffff;
  /* 幾乎白，但有感受到氣氛 */
  color: #333;
  font-size: 1rem;
}

a {
  text-decoration: none;
}

/* =========================================================
      LAYOUT
  ========================================================= */
@media (min-width:1200px) {
  .container {
    max-width: 1200px;
  }
}

.container {
  padding: 0;
}

/* LAYOUT site-footer */
/* 預設：手機（直排） */
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 平板以上：橫排 */
@media (min-width: 768px) {
  .footer-grid {
    flex-direction: row;
  }
}

.footer-links,
.footer-shop {
  flex: 1;
}

.footer-contact,
.footer-social {
  flex: 1.5;
}

/* =========================================================
      SECTION
  ========================================================= */

.section {
  padding: clamp(60px, 10vw, 120px) 0;
}

.section__inner {
  padding: 0 clamp(10px, 6vw, 20px);

  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 👉 SECTION 變形（這裡才對） */
.section--oval {
  position: relative;
}

.section--oval::before {
  content: "";
  position: absolute;

  top: 0;
  left: 50%;
  transform: translate(-50%, -40%);
  /* ⭐ 核心 */

  width: clamp(220px, 60vw, 350px);
  aspect-ratio: 350 / 160;

  border-radius: 50%;
  background: var(--oval-bg, #eee1d8);

  z-index: 0;

}

.section.hero {}


/* section news */
.section.news {
  position: relative;
  background: #eeeff4;
}

.news::before {
  background: #eeeff4;
}


/* section brands */
.section.brands {
  position: relative;
  background: #fff;

}

.brands::before {
  background: #fff;
}

/* section recommends */
.section.recommends {
  position: relative;
  background: #eee1d8;
}

.recommend::before {
  background: #eee1d8;
}


/* section events */
.section.events {}

.events::before {
  background: #fff;
}


/* section site-footer */
.footer-top {
  padding: 40px 0;
  background: #eeeeee;
}

.footer-bottom {
  background: #8ca2c9;
  padding: 20px 0;
}

/* =========================================================
      COMPONENT
  ========================================================= */

.section__title {
  position: relative;
  z-index: 1;
  text-align: center;

  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.3;
  color: #1b4493;

  margin-bottom: 40px;
  /* ✅ 真正間距 */
}

.section--oval .section__title {
  transform: translateY(clamp(-120px, -9vw, -60px));
  margin-bottom: 0;
  /* 避免 double spacing */
}

/* ================= COMPONENT：brands ================= */
.brand-list {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); */
  gap: 10px;
  padding: 0 5px;
}

/* 手機 */
@media (max-width: 576px) {
  .brand-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 平板 */
@media (min-width: 577px) and (max-width: 1199px) {
  .brand-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* PC (1200 container) */
@media (min-width: 1200px) {
  .brand-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.brand-item {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.3s ease;

}
/* 平板 */
@media (min-width: 577px) and (max-width: 1199px) {
  .brand-item {
    height: 80px;
  }
}

/* PC (1200 container) */
@media (min-width: 1200px) {
  .brand-item {
    height: 100px;
  }
}
.brand-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* .brand-item a:hover {
    background: #f5f5f5;
  } */


.brand-item img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

.brand-item a:hover img {
  transform: scale(1.08);
}


/* COMPONENT site-footer */
.footer-title {
  color: #16449c;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.footer-list,
.footer-info {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li,
.footer-info li {
  margin-bottom: 8px;
  font-size: 14px;
}

.footer-list a {
  color: #424141;
  text-decoration: none;
  transition: all .2s;
}

.footer-list a:hover {
  color: #7c7c7c;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-copyright {
  font-size: .9rem;
  line-height: 1.8;
  color: #fcfcfc;
  text-align: center;
  padding: 20px 0;
}

.footer-copyright p {
  margin: 4px 0;
  line-height: 1.6;
}

/* ================= UTILITY ================= */


/* LAYOUT card-event */
.card-event {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 左右區塊 */
.event-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 圖文 */
.event-image,
.event-content {
  width: 100%;
}

.event-content {
  display: flex;
  flex-direction: column;
}

/* 👉 按鈕區（靠右） */
.event-footer {
  display: flex;
  justify-content: flex-end;
}

/* 平板以上 */
@media (min-width: 768px) {
  .event-main {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .event-image,
  .event-content {
    flex: 0 0 48%;
  }
}

/* COMPONENT event-image*/
.event-image img {
  width: 100%;
  object-fit: cover;
}

.event-title {
  position: relative;
  color: #5c94a7;
  font-weight: 700;
  line-height: 1.3;
  padding-left: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.event-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #f4a261;
  border-radius: 2px;
}

.event-subtitle {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: .5rem;
  padding-bottom: .5rem;
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  font-weight: 600;
  color: #9b9b9b;
}

.event-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background-color: #999;
}

.event-meta {
  margin-top: 1rem;
}

.event-meta p {
  margin-bottom: .3rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.event-more {
  align-self: flex-start;
  margin-top: auto;

  display: inline-flex;
  align-items: center;
  gap: .75em;

  padding: .25em 1.25em .25em 1.5em;

  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  font-weight: 500;

  color: #fff;
  background: #ec9d62;

  border-radius: 999px;
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease;
}

.event-more .icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.6em;
  height: 1.6em;

  font-size: .9em;
  font-weight: bold;

  color: #ec9d62;
  background: #fff;

  border-radius: 50%;
}

.event-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.event-more:hover .icon {
  transform: translateX(4px);
}