@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400&display=swap');

:root{--cream:#f2f0e3;--green:#3c605e;--gray:#616161;--pale:#dfe5d8;--accent:#987235}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:#333;line-height:1.75}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* Elementor 安全設定：桌機顯示桌機內容，手機才切到手機內容 */
.page{width:100%;margin:0;background:var(--cream);overflow:hidden}
.mobile-info-page{display:none!important}
@media(min-width:521px){
  .page{display:block!important}
  .mobile-info-page{display:none!important}
}

/* =========================
   Info overview desktop
========================= */
.section-title{display:flex;align-items:baseline;gap:36px;color:var(--green);margin-bottom:28px}
.section-title h1,.section-title h2{margin:0;font-size:45px;letter-spacing:.2em;line-height:1;font-weight:600;white-space:nowrap}
.section-title span{font-family:Afacad,Arial,sans-serif;font-size:31px;letter-spacing:.15em;white-space:nowrap}
.info-home{position:relative;min-height:1210px;padding:78px 8vw 0;background:var(--cream);overflow:hidden}
.info-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.info-intro{max-width:1110px;color:#616161;font-size:16px;letter-spacing:.12em;line-height:2.08;font-weight:700;text-align:justify;margin-bottom:44px}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px 20px;width:100%;max-width:1110px;margin:0 0 100px}
.case-card{display:block;position:relative;border-radius:0;overflow:visible;background:transparent;box-shadow:none;transition:.28s;color:var(--green);text-align:center}
.case-card:hover{transform:none;box-shadow:none}
.case-card .case-img-wrap{width:100%;aspect-ratio:1.36/1;border-radius:22px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.16);background:#ddd}
.case-card img{position:static;width:100%;height:100%;object-fit:cover;transition:.45s}
.case-card:after{content:none}
.case-card:hover img{transform:scale(1.04)}
.case-body{position:static;z-index:1;color:var(--green);padding:16px 0 0}
.case-body h3{margin:0 0 18px;color:var(--green);font-size:17px;line-height:1.45;letter-spacing:.06em;font-weight:600;min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center}
.readmore{display:flex;align-items:center;justify-content:center;width:100%;height:40px;border:1.5px solid var(--green);border-radius:999px;color:var(--green);font-size:16px;letter-spacing:.12em;font-weight:500;padding:0;transition:.25s;background:transparent}
.case-card:hover .readmore{background:#78968f;border-color:#78968f;color:#fff}

/* =========================
   Info article desktop
========================= */
.article-page{background:var(--cream);position:relative}
.article-hero{height:240px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.article-hero:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.article-hero-title{position:relative;z-index:1;color:#fff;text-align:center;text-shadow:0 3px 9px rgba(0,0,0,.28)}
.article-hero-title h1{margin:0;font-size:42px;letter-spacing:.18em}
.article-hero-title span{display:block;font-size:23px;letter-spacing:.22em;margin-top:8px}
.article-wrap{position:relative;max-width:1050px;margin:0 auto;padding:72px 30px 90px}
.article-bg{position:absolute;inset:0;background-repeat:no-repeat;background-position:center 40px;background-size:100% auto;opacity:.13;pointer-events:none}
.article-content{position:relative;z-index:1}
.article-title{color:var(--green);font-size:38px;line-height:1.42;letter-spacing:.12em;margin:0 0 14px;font-weight:800}
.article-subtitle{color:var(--green);font-size:28px;letter-spacing:.08em;line-height:1.5;margin:0 0 34px;font-weight:800}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:46px;align-items:start}
.article-text{font-size:16px;letter-spacing:.08em;line-height:2.05;color:#616161;font-weight:700;text-align:justify}
.article-text p{margin:0 0 20px}
.article-images{display:flex;flex-direction:column;gap:18px}
.article-images img{border-radius:18px;box-shadow:0 12px 22px rgba(0,0,0,.16);width:100%;object-fit:cover}
.article-decoration{width:80px;margin:30px auto;opacity:.9}
.more-nav{margin-top:60px;border-top:1px solid rgba(60,96,94,.25);padding-top:30px}
.more-title{color:var(--green);font-size:22px;letter-spacing:.16em;font-weight:800;margin-bottom:18px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.more-card{display:block;background:#e3e8dc;border-radius:18px;padding:16px;color:var(--green);font-weight:800;letter-spacing:.08em;min-height:86px;transition:.25s}
.more-card:hover{background:var(--green);color:#fff;transform:translateY(-3px)}

@media(max-width:900px) and (min-width:521px){
  .section-title{display:block}
  .section-title h1,.section-title h2{font-size:32px;letter-spacing:.34em}
  .section-title span{display:block;margin-top:10px;font-size:24px}
  .info-home{padding:52px 22px 0}
  .case-grid{grid-template-columns:1fr 1fr;gap:32px 24px;max-width:620px}
  .case-card .case-img-wrap{aspect-ratio:1.36/1}
  .case-body h3{min-height:46px}
  .article-layout{grid-template-columns:1fr}
  .article-images{display:grid;grid-template-columns:1fr 1fr}
  .article-title{font-size:30px}
  .article-subtitle{font-size:22px}
  .more-grid{grid-template-columns:1fr 1fr}
}

/* =========================
   Mobile info content only
   Header / drawer / footer 已交給 Elementor 共用模板
========================= */
@media(max-width:520px){
  html,body{width:100%!important;max-width:none!important;background:#f2f0e3!important;overflow-x:hidden!important}
  body.mi-open{overflow:auto!important}

  .mobile-info-page{display:block!important;width:100%!important;max-width:none!important;margin:0!important;background:#f2f0e3;color:#2f6362;min-height:100vh;overflow:hidden;font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;position:relative}

  /* 移除原本資訊分享頁內建手機 header / menu / footer / top */
  .mi-header,
  .mi-backdrop,
  .mi-drawer,
  .mi-close,
  .mi-menu,
  .mi-footer,
  .mi-top{display:none!important}

  .mi-info-main{padding:42px 27px 50px}
  .mi-info-title{display:flex;align-items:baseline;gap:0;color:#3c605e;margin:0 0 12px;white-space:nowrap;position:relative}
  .mi-info-title h1{font-size:30px;letter-spacing:.34em;line-height:1;margin:0;font-weight:900}
  .mi-info-title span{font-size:18px;letter-spacing:.25em;line-height:1;font-weight:500;text-align:justify;text-align-last:right;margin-left:auto}
  .mi-info-intro{font-size:10px;line-height:2.18;letter-spacing:.08em;color:#333;font-weight:500;text-align:justify;margin:0 0 25px}
  .mi-case-list{display:flex;flex-direction:column;gap:22px}
  .mi-case-card{display:block!important;text-align:center!important;color:#3c605e!important}
  .mi-case-card .mi-card-img{width:100%;max-width:100%;margin:0 auto;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.15))}
  .mi-case-title{display:block!important;width:306px;max-width:100%;margin:10px auto 9px!important;color:#3c605e!important;font-size:18px!important;line-height:1.45!important;letter-spacing:.06em!important;font-weight:900!important;text-align:center!important;min-height:auto!important}
  .mi-case-card .mi-read{display:block!important;position:relative!important;width:306px!important;max-width:100%!important;height:auto;margin:0 auto!important;z-index:2!important}
  .mi-case-card:active .mi-read{content:url('https://yi-tian.tw/assets/mobile-info/readmore-hover.svg')}

  /* 手機文章內頁圖片輪播 */
  .mi-photo-slider{width:calc(100% + 68px)!important;margin:0 -34px 34px!important;position:relative!important;overflow:hidden!important}
  .mi-photo-track{display:flex!important;gap:0!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;-webkit-overflow-scrolling:touch!important;padding:0!important}
  .mi-photo-track::-webkit-scrollbar{display:none!important}
  .mi-photo-slide{flex:0 0 100%!important;width:100%!important;margin:0!important;scroll-snap-align:start!important}
  .mi-photo-slide img{width:100%!important;height:auto!important;display:block!important;object-fit:cover!important;border-radius:0!important;box-shadow:none!important}
  .mi-photo-slide:nth-child(2) img{object-fit:contain!important;background:#f2f0e3!important}
  .mi-photo-slide figcaption,
  .mi-detail-caption{display:none!important}
}
/* Elementor info page display fix */
.mobile-info-page{
  display:none !important;
}

@media(min-width:521px){
  .mobile-info-page{
    display:none !important;
  }

  .info-home,
  .article-page{
    display:block !important;
  }
}

@media(max-width:520px){
  .info-home,
  .article-page{
    display:none !important;
  }

  .mobile-info-page{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    background:#f2f0e3 !important;
    color:#2f6362 !important;
    min-height:auto !important;
    overflow:visible !important;
    position:relative !important;
  }

  .mi-info-main{
    display:block !important;
    padding:42px 27px 50px !important;
    background:#f2f0e3 !important;
  }

  .mi-info-title{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap:0 !important;
    color:#3c605e !important;
    margin:0 0 12px !important;
    white-space:nowrap !important;
  }

  .mi-info-title h1{
    font-size:30px !important;
    letter-spacing:.34em !important;
    line-height:1 !important;
    margin:0 !important;
    font-weight:900 !important;
    color:#3c605e !important;
  }

  .mi-info-title span{
    font-family:Afacad,Arial,sans-serif !important;
    font-size:18px !important;
    letter-spacing:.25em !important;
    line-height:1 !important;
    font-weight:500 !important;
    color:#3c605e !important;
    white-space:nowrap !important;
  }

  .mi-info-intro{
    font-size:10px !important;
    line-height:2.18 !important;
    letter-spacing:.08em !important;
    color:#333 !important;
    font-weight:500 !important;
    text-align:justify !important;
    margin:0 0 25px !important;
  }

  .mi-case-list{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }

  .mi-case-card{
    display:block !important;
    text-align:center !important;
    color:#3c605e !important;
  }

  .mi-case-card .mi-card-img{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    display:block !important;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.15)) !important;
  }

  .mi-case-title{
    display:block !important;
    width:306px !important;
    max-width:100% !important;
    margin:10px auto 9px !important;
    color:#3c605e !important;
    font-size:18px !important;
    line-height:1.45 !important;
    letter-spacing:.06em !important;
    font-weight:900 !important;
    text-align:center !important;
  }

  .mi-case-card .mi-read{
    display:block !important;
    width:306px !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
  }
}