/* Thai seaport pages (/ports and /ports/<slug>), on top of industry/industry.css */

/* overview: text + key facts */
.pt-ov__in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
.pt-ov .prose strong{color:var(--navy)}
.pt-facts thead th{font-size:15px}
.pt-facts tbody th{width:38%}
.pt-src{display:flex;gap:8px;margin:14px 2px 0;font-size:13px;line-height:1.5;color:var(--mute)}
.pt-src .ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--gold)}

/* map with port pin and hinterland */
.pt-map{margin:0;padding:18px 18px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);position:sticky;top:110px}
.pt-map figcaption{font:600 13px/1.2 var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.lang-th .pt-map figcaption{letter-spacing:0;text-transform:none;font-size:15px}
.pt-map .thmap{width:100%;height:auto;max-height:560px;display:block;margin:0 auto}
.pt-map .thmap .thmap__p{fill:#D9E1EB}
.pt-map .thmap .thmap__p.is-hz{fill:#EBCB86}
.pt-map .thmap a:hover .thmap__p{fill:var(--navy)}
.pt-map .thmap__port.is-on rect{fill:var(--red);stroke-width:2}
.pt-map .thmap__port rect{transform-box:fill-box}
.pt-map a .thmap__port{cursor:pointer}
.pt-map__leg{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--mute)}
.pt-map__leg li{display:flex;align-items:center;gap:7px}
.pt-map__leg i{display:inline-block;width:10px;height:10px;transform:rotate(45deg);border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.pt-map__leg .k-on{background:var(--red)}.pt-map__leg .k-cif{background:var(--gold)}.pt-map__leg .k-port{background:var(--navy)}
.pt-map__leg .k-hl{transform:none;width:14px;background:#EBCB86;border-color:#EBCB86;box-shadow:none}

/* estate ecosystem */
.pt-est__in{display:grid;grid-template-columns:1.5fr minmax(280px,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pt-est__in .pt-map{position:static}
.pt-est__in .pt-map .thmap{max-height:470px}
.pt-est .prose strong{color:var(--navy)}
.pt-est__h{display:flex;align-items:baseline;gap:8px;margin:26px 0 12px;font-size:1.3rem}
.pt-est__h .ic{width:18px;height:18px;color:var(--red);align-self:center}
.pt-est__h a{color:var(--navy)}
.pt-est__h small{font:500 14px/1 var(--f-body);color:var(--mute)}
.pt-est__grid{grid-template-columns:repeat(4,1fr);gap:14px}
.pt-est__grid .iecard{padding:16px 16px 14px}
.pt-est__grid .iecard h3{font-size:1.05rem}
.pt-est__grid .iecard__tags i:nth-child(n+3){display:none}
@media (max-width:1100px){.pt-est__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.pt-est__grid{grid-template-columns:repeat(2,1fr)}}

/* industries around the port */
.pt-ind__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pt-ind__card{display:flex;gap:16px;padding:22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--sh);color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
a.pt-ind__card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-left-color:var(--red)}
.pt-ind__ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:var(--navy);color:var(--gold-l)}
.pt-ind__ic .ic{width:26px;height:26px}
.pt-ind__card h3{font-size:1.2rem;margin:2px 0 6px}
.pt-ind__card p{margin:0 0 10px;font-size:15px;line-height:1.55}
.pt-ind__card .more{font-size:13.5px}

/* World Steel solutions (dark) */
.pt-sol__card{position:relative;display:block;color:inherit}
.pt-sol__go{position:absolute;right:20px;top:24px;color:var(--gold-l);opacity:.5;transition:opacity .2s,transform .2s}
.pt-sol__go .ic{width:20px;height:20px}
.pt-sol__card:hover .pt-sol__go{opacity:1;transform:translateX(4px)}

/* delivery route */
.pt-route__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s;position:relative}
.pt-route__steps:before{content:"";position:absolute;left:10%;right:10%;top:32px;border-top:2px dashed var(--steel)}
.pt-route__steps li{position:relative;text-align:center;padding:0 6px}
.pt-route__ic{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#fff;border:2px solid var(--navy);color:var(--navy);box-shadow:var(--sh)}
.pt-route__ic .ic{width:28px;height:28px}
.pt-route__ic b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:600 13px/1 var(--f-head)}
.pt-route__steps h3{font-size:1.15rem;margin:0 0 6px}
.pt-route__steps p{margin:0;font-size:14.5px;line-height:1.55}

/* hub */
.pt-hub__how{grid-template-columns:repeat(3,1fr)!important;margin-bottom:clamp(36px,5vw,56px)}
.pt-hub__how li{align-items:flex-start}
.pt-hub__how span{display:flex;flex-direction:column;gap:3px}
.pt-hub__how small{font-weight:400;font-size:14px;line-height:1.45;color:var(--mute)}
.pt-hub__in{display:grid;grid-template-columns:minmax(240px,.6fr) 2fr;gap:clamp(24px,4vw,44px);align-items:start}
.pt-hub__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pt-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);color:inherit;transition:transform .25s,box-shadow .25s}
a.pt-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.pt-card.is-soon{opacity:.82}
.pt-card__img{position:relative;aspect-ratio:16/7;overflow:hidden}
.pt-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.pt-card:hover .pt-card__img img{transform:scale(1.05)}
.pt-card__cif{position:absolute;left:14px;top:14px;padding:5px 10px;border-radius:4px;background:var(--gold);color:#fff;font:600 12.5px/1 var(--f-head);letter-spacing:.1em}
.pt-card__body{flex:1;display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.pt-card__body small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.pt-card__body small .ic{width:14px;height:14px;color:var(--red)}
.pt-card h3{margin:0;font-size:1.3rem}
.pt-card p{margin:0;font-size:15px;line-height:1.55}
.pt-card__meta{font-size:13px;color:var(--navy);font-weight:600}
.pt-card .more{margin-top:auto;padding-top:6px;font-size:13.5px}
.pt-which__tbl tbody th small{display:block;font-weight:400;font-size:13px;color:var(--mute);margin-top:2px}
.pt-which__tbl tbody th a{color:var(--red)}
.pt-which__tbl td b{color:var(--navy)}
.pt-which__tbl tbody th{width:26%}
.pt-oth__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pt-oth__card{display:flex;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pt-oth__card>span{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#EEF2F7;color:var(--navy)}
.pt-oth__card h3{margin:0;font-size:1.15rem}
.pt-oth__card small{color:var(--mute);font-size:13px}
.pt-oth__card p{margin:6px 0 0;font-size:15px}

@media (max-width:1100px){
  .pt-ind__grid{grid-template-columns:repeat(2,1fr)}
  .pt-route__steps{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .pt-route__steps:before{display:none}
}
@media (max-width:900px){
  .pt-ov__in,.pt-est__in,.pt-hub__in{grid-template-columns:1fr}
  .pt-map{position:static;max-width:420px;margin:0 auto;width:100%}
  .pt-map .thmap{max-height:420px}
}
@media (max-width:760px){
  .pt-ind__grid,.pt-hub__grid,.pt-oth__grid,.pt-hub__how{grid-template-columns:1fr!important}
  .pt-route__steps{grid-template-columns:1fr;gap:16px}
  .pt-route__steps li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;text-align:left;padding:0}
  .pt-route__ic{grid-row:span 2;width:52px;height:52px;margin:0}
  .pt-route__ic .ic{width:24px;height:24px}
  .pt-est__grid{grid-template-columns:1fr}
}
.pt-hz{display:flex;gap:10px;margin:18px 0 0;padding:14px 16px;border-radius:var(--r);background:#fff;border:1px solid var(--line);font-size:14.5px;line-height:1.55}
.pt-hz .ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--gold)}
.pt-hz a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(0,36,74,.25)}
@media (max-width:760px){
  .page-port .phero__btns{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .page-port .phero__btns .btn{justify-content:center;white-space:normal;text-align:center}
  .pt-est__grid{gap:10px}
  .pt-est__grid .iecard{padding:12px 14px;gap:4px}
  .pt-est__grid .iecard__op,.pt-est__grid .iecard__tags{display:none}
}
.phero{position:relative}.pt-credit{position:absolute;right:16px;bottom:36px;z-index:3;margin:0;max-width:min(560px,calc(100% - 32px));font:400 .72rem/1.35 var(--f-body);color:rgba(255,255,255,.72);text-align:right;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:760px){.pt-credit{font-size:.66rem;bottom:30px;left:16px;text-align:left}}