/* GI 集團品牌首頁模組 v1.0.10
   ponytail: 只在 .gi-home 作用；不碰 Journal 其他頁面。 */
.gi-home{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--gi-dark);
  color:var(--gi-text);
  font-family:var(--gi-font-body,"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif);
  -webkit-font-smoothing:antialiased;
}
body.gi-group-home-page{overflow-x:clip;}
.gi-home *{box-sizing:border-box;}

.gi-home .gi-hero__eyebrow,
.gi-home .gi-hero__title,
.gi-home .gi-hero__domains,
.gi-home .gi-brand-nav__heading h2,
.gi-home .gi-brand-card__name,
.gi-home .gi-brand-card__subtitle,
.gi-home .gi-brand-card__more,
.gi-home .gi-brand__name,
.gi-home .gi-brand__sub,
.gi-home .gi-brand__btn{
  font-family:var(--gi-font-heading,"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif)!important;
}
.gi-home .gi-hero__desc,
.gi-home .gi-brand-card__desc,
.gi-home .gi-brand__desc{
  font-family:var(--gi-font-body,"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif)!important;
}

/* ====================== Hero ====================== */
.gi-hero{
  position:relative;
  height:var(--gi-hero-h);
  min-height:var(--gi-hero-hmin);
  background-image:var(--gi-hero-bg,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  color:var(--gi-title);
  overflow:hidden;
}
.gi-hero--noimg{
  background-image:
    radial-gradient(circle at 72% 30%,rgba(201,162,74,.13),transparent 32%),
    linear-gradient(135deg,#120d08 0%,#241710 48%,#302015 100%);
}
.gi-hero__mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.48) 44%,rgba(0,0,0,.12) 100%),
    linear-gradient(0deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,0) 38%);
}
.gi-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  padding:var(--gi-header-safe,0px) 6vw 0;
}
.gi-hero__content{max-width:780px;text-align:left;}
.gi-hero__eyebrow{
  margin:0 0 20px;
  color:var(--gi-gold);
  font-size:clamp(15px,1.5vw,20px);
  font-weight:500;
  letter-spacing:.3em;
}
.gi-hero__title{
  margin:0 0 24px;
  color:var(--gi-title);
  font-size:clamp(40px,4.2vw,var(--gi-hero-title-size,64px));
  font-weight:700;
  line-height:1.13;
  letter-spacing:.03em;
}
.gi-hero__domains{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.14em .52em;
  margin:0 0 30px;
  color:var(--gi-gold);
  font-size:clamp(18px,2vw,28px);
  font-weight:500;
  letter-spacing:.055em;
}
.gi-hero__domains .d{white-space:nowrap;}
.gi-hero__domains .gi-sep{font-style:normal;font-weight:300;opacity:.45;}
.gi-hero__desc{
  max-width:570px;
  margin-bottom:40px;
  color:rgba(255,255,255,.86);
  font-size:clamp(15px,1.35vw,18px);
  line-height:2.05;
}
.gi-home .gi-hero__scroll,
.gi-home .gi-hero__scroll:link,
.gi-home .gi-hero__scroll:visited{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  margin:0;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  color:var(--gi-text)!important;
  font:inherit;
  letter-spacing:.25em;
  text-decoration:none!important;
  appearance:none;
  cursor:pointer;
}
.gi-home .gi-hero__scroll:hover,
.gi-home .gi-hero__scroll:focus,
.gi-home .gi-hero__scroll:active{
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  color:var(--gi-gold)!important;
  outline:none!important;
  text-decoration:none!important;
}
.gi-hero__scroll-label{font-size:13px;}
.gi-hero__scroll-mark{display:flex;flex-direction:column;align-items:center;gap:8px;}
.gi-hero__scroll .gi-diamond{width:9px;height:9px;border:1px solid currentColor;transform:rotate(45deg);}
.gi-hero__scroll .gi-vline{
  width:1px;
  height:30px;
  background:linear-gradient(180deg,currentColor 0%,rgba(255,255,255,0) 100%);
  animation:gi-flow 1.9s ease-in-out infinite;
}
@keyframes gi-flow{
  0%,100%{transform:scaleY(.6);opacity:.5;transform-origin:top;}
  50%{transform:scaleY(1);opacity:1;transform-origin:top;}
}


/* ====================== Five-brand navigation ====================== */
.gi-brand-nav{
  position:relative;
  z-index:4;
  padding:28px 2.4vw 34px;
  background:var(--gi-nav-bg,#f4efe6);
  color:var(--gi-nav-text,#4c4036);
  font-family:var(--gi-font-body,"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif);
  overflow:hidden;
}
.gi-brand-nav::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background:
    radial-gradient(circle at 18% 18%,rgba(161,125,76,.16),transparent 28%),
    repeating-linear-gradient(0deg,rgba(120,88,50,.025) 0 1px,transparent 1px 4px);
}
.gi-brand-nav__inner{position:relative;z-index:1;max-width:1500px;margin:0 auto;}
.gi-brand-nav__heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 24px;
  color:var(--gi-nav-title,#3b2b20);
}
.gi-brand-nav__heading h2{
  margin:0 16px;
  color:inherit;
  font-size:clamp(28px,2.5vw,var(--gi-nav-title-size,42px));
  font-weight:600;
  letter-spacing:.16em;
  white-space:nowrap;
}
.gi-brand-nav__heading span{width:min(13vw,150px);height:1px;background:linear-gradient(90deg,transparent,rgba(151,116,70,.48));}
.gi-brand-nav__heading span:last-child{transform:scaleX(-1);}
.gi-brand-nav__heading i{width:8px;height:8px;border:1px solid rgba(151,116,70,.58);transform:rotate(45deg);}
.gi-brand-nav__grid{display:grid;grid-template-columns:repeat(var(--gi-card-cols,5),minmax(0,1fr));gap:12px;}
.gi-home .gi-brand-card,
.gi-home .gi-brand-card:link,
.gi-home .gi-brand-card:visited{
  display:flex;
  min-width:0;
  min-height:290px;
  padding:24px 16px 20px;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border:1px solid rgba(136,105,67,.24);
  border-radius:8px;
  background:var(--gi-nav-card,#fbf8f1);
  box-shadow:0 3px 14px rgba(77,52,27,.06);
  color:var(--gi-nav-text,#4c4036)!important;
  text-decoration:none!important;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.gi-home .gi-brand-card:hover,
.gi-home .gi-brand-card:focus{
  transform:translateY(-4px);
  border-color:rgba(163,126,72,.55);
  box-shadow:0 12px 26px rgba(77,52,27,.12);
  text-decoration:none!important;
}
.gi-brand-card__logo{
  display:grid;
  place-items:center;
  width:96px;
  height:82px;
  margin-bottom:12px;
  color:#8b6e3f;
}
.gi-brand-card__logo img{display:block;width:100%;height:100%;max-width:100%;max-height:82px;object-fit:contain;}
.gi-brand-card__logo b{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:30px;
  font-weight:600;
}
.gi-brand-card__name{display:block;margin:0 0 8px;color:var(--gi-nav-title,#3b2b20);font-size:clamp(19px,1.35vw,var(--gi-card-title-size,25px));font-weight:700;letter-spacing:.06em;}
.gi-brand-card__subtitle{display:block;min-height:24px;margin-bottom:12px;color:#8c6a35;font-size:15px;font-weight:600;letter-spacing:.08em;}
.gi-brand-card__desc{display:block;min-height:56px;color:var(--gi-nav-text,#4c4036);font-size:13px;line-height:1.75;}
.gi-brand-card__more{display:block;margin-top:auto;padding-top:14px;color:#5e4a38;font-size:14px;font-weight:600;letter-spacing:.12em;}
.gi-brand-card__more i{margin-left:4px;font-style:normal;}

/* ===== 品牌導覽區深色系（背景判定為深色時，由控制器加上 .gi-brand-nav--dark） ===== */
.gi-brand-nav--dark::before{
  opacity:.5;
  background:
    radial-gradient(circle at 18% 12%,rgba(201,162,74,.10),transparent 32%),
    repeating-linear-gradient(0deg,rgba(201,162,74,.022) 0 1px,transparent 1px 5px);
}
.gi-brand-nav--dark .gi-brand-nav__heading span{background:linear-gradient(90deg,transparent,rgba(201,162,74,.55));}
.gi-brand-nav--dark .gi-brand-nav__heading i{border-color:rgba(201,162,74,.7);}
.gi-home .gi-brand-nav--dark .gi-brand-card,
.gi-home .gi-brand-nav--dark .gi-brand-card:link,
.gi-home .gi-brand-nav--dark .gi-brand-card:visited{
  border:1px solid rgba(201,162,74,.22);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.gi-home .gi-brand-nav--dark .gi-brand-card:hover,
.gi-home .gi-brand-nav--dark .gi-brand-card:focus{
  border-color:rgba(201,162,74,.6);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.gi-brand-nav--dark .gi-brand-card__logo{color:#e8dcc4;}
.gi-brand-nav--dark .gi-brand-card__subtitle{color:#d9bd86;}
.gi-brand-nav--dark .gi-brand-card__more{color:#d9bd86;}

@media(max-width:1180px){
  .gi-brand-nav__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
}
@media(max-width:768px){
  .gi-brand-nav{padding:24px 0 30px;}
  .gi-brand-nav__heading{padding:0 6vw;margin-bottom:20px;}
  .gi-brand-nav__heading h2{margin:0 8px;font-size:26px;letter-spacing:.1em;}
  .gi-brand-nav__heading span{width:38px;}
  .gi-brand-nav__grid{display:flex;gap:12px;padding:0 6vw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .gi-brand-nav__grid::-webkit-scrollbar{display:none;}
  .gi-home .gi-brand-card{flex:0 0 78vw;max-width:330px;min-height:280px;scroll-snap-align:start;}
}

/* ====================== Brand blocks ====================== */
.gi-brand{
  position:relative;
  margin-top:var(--gi-gap);
  background-color:var(--gi-panel-bg,var(--gi-dark));
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.gi-brand__mask{
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--gi-panel-bg,var(--gi-dark));
  pointer-events:none;
}
.gi-brand__grid{
  position:relative;
  z-index:2;
  display:grid;
  min-height:var(--gi-minh);
  align-items:stretch;
  background:transparent;
}
.gi-brand__media{
  position:relative;
  z-index:1;
  min-height:var(--gi-minh);
  overflow:visible;
  background:var(--gi-panel-bg,var(--gi-dark));
}
.gi-brand__visual{
  position:absolute;
  top:0;
  bottom:0;
  width:calc(100% + clamp(72px,9vw,180px));
  overflow:hidden;
  background:var(--gi-panel-bg,var(--gi-dark));
}
.gi-brand--image-left .gi-brand__visual{
  left:0;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - var(--gi-blend)),transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - var(--gi-blend)),transparent 100%);
}
.gi-brand--image-right .gi-brand__visual{
  right:0;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 calc(100% - var(--gi-blend)),transparent 100%);
  mask-image:linear-gradient(to left,#000 0%,#000 calc(100% - var(--gi-blend)),transparent 100%);
}
.gi-brand__visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(0,0,0,var(--gi-image-dim,.18));
  pointer-events:none;
}
.gi-brand__visual picture,
.gi-brand__visual img,
.gi-brand__ph{width:100%;height:100%;display:block;}
.gi-brand__visual img{position:absolute;inset:0;object-fit:cover;}

.gi-brand__ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 68% 28%,rgba(201,162,74,.18),transparent 34%),
    linear-gradient(135deg,#2a1d12 0%,#3a2817 100%);
}
.gi-brand__ph::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg,rgba(201,162,74,.045) 0 14px,rgba(201,162,74,0) 14px 28px);
}
.gi-brand__ph--1{background:linear-gradient(135deg,#241710,#4a2e1a);}
.gi-brand__ph--2{background:linear-gradient(135deg,#2a1d12,#50351f);}
.gi-brand__ph--3{background:linear-gradient(135deg,#1f160f,#3c2917);}
.gi-brand__ph--4{background:linear-gradient(135deg,#2d1f13,#4a321a);}
.gi-brand__ph--5{background:linear-gradient(135deg,#221811,#442d1a);}
.gi-brand__ph-label{
  position:relative;
  z-index:1;
  color:rgba(201,162,74,.78);
  font-size:clamp(13px,1.35vw,16px);
  letter-spacing:.23em;
}

/* mask-image 不支援時，以偽元素做相同方向淡出 */
@supports not ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
  .gi-brand__visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
  }
  .gi-brand--image-left .gi-brand__visual::before{
    background:linear-gradient(to right,transparent calc(100% - var(--gi-blend)),var(--gi-panel-bg) 100%);
  }
  .gi-brand--image-right .gi-brand__visual::before{
    background:linear-gradient(to left,transparent calc(100% - var(--gi-blend)),var(--gi-panel-bg) 100%);
  }
}

.gi-brand__content{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  min-width:0;
  background:transparent;
}
.gi-brand__content-in{
  width:100%;
  padding:56px clamp(38px,7vw,118px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.gi-brand__logo{margin-bottom:22px;}
.gi-brand__logo img{width:auto;height:60px;max-width:180px;object-fit:contain;}
.gi-brand__name{
  margin:0 0 6px;
  color:var(--gi-title);
  font-size:clamp(27px,3vw,var(--gi-brand-title-size,42px));
  font-weight:700;
  letter-spacing:.055em;
}
.gi-brand__en{
  margin:0 0 24px;
  color:rgba(255,255,255,.56);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.gi-brand__sub{
  margin:0 0 18px;
  color:var(--gi-gold);
  font-size:clamp(17px,1.75vw,22px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:.05em;
}
.gi-brand__desc{
  max-width:500px;
  margin-bottom:34px;
  color:rgba(255,255,255,.8);
  font-size:clamp(14px,1.35vw,var(--gi-body-size,17px));
  line-height:2.05;
}
.gi-home .gi-brand__btn,
.gi-home .gi-brand__btn:link,
.gi-home .gi-brand__btn:visited{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:14px;
  padding:13px 30px;
  border:1px solid var(--gi-gold);
  border-radius:var(--gi-radius);
  background:transparent;
  box-shadow:none;
  color:var(--gi-gold);
  font-size:15px;
  letter-spacing:.16em;
  text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.gi-home .gi-brand__btn:hover,
.gi-home .gi-brand__btn:focus{
  background:var(--gi-gold);
  color:var(--gi-panel-bg,var(--gi-dark));
  text-decoration:none;
}
.gi-brand__btn .gi-arrow{font-size:18px;line-height:1;}
.gi-home .gi-brand__btn--disabled{
  opacity:.72;
  cursor:default;
  pointer-events:none;
}

.gi-brand--image-right .gi-brand__media{order:2;}
.gi-brand--image-right .gi-brand__content{order:1;}
.gi-brand--image-left .gi-brand__media{order:1;}
.gi-brand--image-left .gi-brand__content{order:2;}

/* ====================== Mobile ====================== */
@media(max-width:768px){
  .gi-hero{height:var(--gi-hero-hm);min-height:520px;}
  .gi-hero__mask{background:linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.32) 74%);}
  .gi-hero__inner{padding:var(--gi-header-safe-mobile,0px) 7vw 0;}
  .gi-hero__content{max-width:100%;}
  .gi-hero__domains{font-size:20px;gap:.1em .4em;}

  .gi-brand__grid{grid-template-columns:1fr!important;}
  .gi-brand__media{order:1!important;min-height:62vw;overflow:visible;}
  .gi-brand__visual,
  .gi-brand--image-left .gi-brand__visual,
  .gi-brand--image-right .gi-brand__visual{
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:calc(100% + 110px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--gi-blend)),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--gi-blend)),transparent 100%);
  }
  .gi-brand__content{order:2!important;min-height:0;}
  .gi-brand__content-in{padding:42px 7vw 48px;}
  .gi-brand__desc{max-width:100%;}
  .gi-brand__logo img{height:48px;}

  @supports not ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
    .gi-brand--image-left .gi-brand__visual::before,
    .gi-brand--image-right .gi-brand__visual::before{
      background:linear-gradient(to bottom,transparent calc(100% - var(--gi-blend)),var(--gi-panel-bg) 100%);
    }
  }
}

/* ====================== Reveal ====================== */
.gi-home .gi-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.gi-home .gi-reveal.gi-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .gi-home .gi-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .gi-hero__scroll .gi-vline{animation:none!important;}
}

/* ====================== v1.0.12 裝飾 ICON 圖片插槽 ====================== */
/* 沒上傳圖時前台用 fallback（文字/CSS 圖形），這些 class 只在有圖時出現。
   寬度走 CSS 變數（桌機值由 .gi-home 內嵌 style 設定，手機由 .gi-home media query 覆寫）。 */
.gi-hero__separator-icon,
.gi-hero__scroll-icon,
.gi-brand-nav__ornament,
.gi-brand-card__more-icon,
.gi-brand__sub-icon,
.gi-brand__button-icon{
  display:inline-block;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
  pointer-events:none;
  user-select:none;
  vertical-align:middle;
}
.gi-hero__separator-icon{width:var(--gi-sep-w,12px);transform:translate(var(--gi-sep-x,0),var(--gi-sep-y,0));}
.gi-hero__scroll-icon{width:var(--gi-scroll-w,34px);transform:translate(var(--gi-scroll-x,0),var(--gi-scroll-y,0));}
.gi-brand-nav__ornament--left{width:var(--gi-navorn-l-w,150px);transform:translate(var(--gi-navorn-l-x,0),var(--gi-navorn-l-y,0));}
.gi-brand-nav__ornament--right{width:var(--gi-navorn-r-w,150px);transform:translate(var(--gi-navorn-r-x,0),var(--gi-navorn-r-y,0));}
.gi-brand-card__more-icon{width:var(--gi-cardarrow-w,18px);transform:translate(var(--gi-cardarrow-x,4px),var(--gi-cardarrow-y,0));}
.gi-brand__sub-icon{width:var(--gi-subicon-w,15px);transform:translate(var(--gi-subicon-x,5px),var(--gi-subicon-y,0));margin-left:2px;}
.gi-brand__button-icon{width:var(--gi-btnarrow-w,20px);transform:translate(var(--gi-btnarrow-x,6px),var(--gi-btnarrow-y,0));}

/* 品牌大型直式圖騰：絕對定位於文字區外側，不參與排版、不擋按鈕。
   .gi-brand 本身 position:relative + overflow:hidden（既有），故圖騰不會產生水平捲軸。
   ponytail: 手機寬度切換用 768（與本檔其餘 brand RWD 同一斷點；若後台 breakpoint 改值，
   圖騰手機寬度仍以 768 為界，必要時再改這行）。 */
.gi-brand__decor{
  position:absolute;
  top:50%;
  width:var(--gi-decor-w,95px);
  height:auto;
  opacity:var(--gi-decor-op,.75);
  transform:translate(var(--gi-decor-x,0),calc(-50% + var(--gi-decor-y,0)));
  pointer-events:none;
  user-select:none;
  z-index:2;
}
.gi-brand__decor--left{left:0;}
.gi-brand__decor--right{right:0;}
@media(max-width:768px){
  .gi-brand__decor{width:var(--gi-decor-wm,58px);opacity:calc(var(--gi-decor-op,.75) * .85);}
}