/* v152: standard app-style home (same structure and type scale as a simple app: header, h1 + p + search, h2 + card grid, call-to-action).
   Scoped to <html data-home="min">; remove that attribute from index.html to bring back the full old page. */
html[data-home="min"] #hero,html[data-home="min"] .stx,html[data-home="min"] main>section.s,html[data-home="min"] main>.s,
html[data-home="min"] .jh .hsearch,html[data-home="min"] .ft-col:not(.ft-trust){display:none!important}

.hm{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text,#14211a);line-height:1.5}
.hm *{box-sizing:border-box;margin:0}
.hm-w{max-width:1080px;margin:0 auto;padding:0 20px}
.hm h1{font-size:clamp(30px,5.5vw,48px);line-height:1.12;font-weight:800;letter-spacing:-.01em;max-width:560px}
.hm h1 span{color:var(--gt,#c9a45c)}
.hm h2{font-size:22px;line-height:1.3;font-weight:700;margin-bottom:16px}
.hm h3{font-size:16px;line-height:1.3;font-weight:600}
.hm p{font-size:16px;color:var(--muted,#667569)}
.hm-search{display:flex;gap:8px;max-width:560px;background:var(--card,#fff);border:1px solid var(--line,#e2e8e3);border-radius:14px;padding:8px}
.hm-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:8px 10px;font:inherit;font-size:15px;color:var(--text,#14211a)}
.hm-btn{display:inline-block;border:0;border-radius:10px;padding:10px 18px;background:var(--gold,#c9a45c);color:var(--on-gold,#2a1d00);font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.hm-sec{padding:40px 0 0}
/* Explore: bento grid (v197): one big tile, a tall tile, two small tiles, two wide tiles and a carousel. No icons, colour and type only. */
.bn{display:grid;gap:14px}
.bn-top{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:repeat(2,minmax(190px,1fr));gap:14px;min-height:400px}
.bn-big,.bn-tall{grid-row:1/3}.bn-sm{grid-column:3;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;gap:14px;min-width:0}
.bn-mid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bn-t{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0;padding:20px;border-radius:24px;overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.16);background:linear-gradient(150deg,color-mix(in srgb,var(--c) 88%,#000) 0,color-mix(in srgb,var(--c) 42%,#0a1620) 100%);box-shadow:0 14px 28px -16px color-mix(in srgb,var(--c) 70%,#000);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;-webkit-tap-highlight-color:transparent}
.bn-t::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 100% 0,rgba(255,255,255,.28) 0,transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px)}
.bn-t::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--img) right bottom/cover no-repeat;opacity:.34;-webkit-mask-image:linear-gradient(to left,#000 10%,rgba(0,0,0,.15) 90%);mask-image:linear-gradient(to left,#000 10%,rgba(0,0,0,.15) 90%);transition:opacity .3s,transform .5s}
.bn-t:hover::after{opacity:.5;transform:scale(1.05)}
.bn-big::after{opacity:.42;background-position:center bottom}.bn-tall::after{-webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 78%);mask-image:linear-gradient(to bottom,#000 25%,transparent 78%);background-size:175% auto;background-position:46% 8%;opacity:.45}.bn-t h3,.bn-t p,.bn-go{text-shadow:0 1px 10px rgba(0,0,0,.4)}
.bn-track .bn-t::after{-webkit-mask-image:linear-gradient(to top,#000 10%,rgba(0,0,0,.1) 80%);mask-image:linear-gradient(to top,#000 10%,rgba(0,0,0,.1) 80%)}
.bn-t:hover,.bn-t:focus-visible{transform:translateY(-4px);box-shadow:0 22px 34px -16px color-mix(in srgb,var(--c) 85%,#000),0 0 0 2px color-mix(in srgb,var(--c) 60%,#fff)}
.bn-t:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bn-k{align-self:flex-start;margin-bottom:auto;padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bn-t h3{margin:0;font-size:18px;font-weight:800;line-height:1.15;color:#fff}
.bn-t p{margin:0;font-size:13px;line-height:1.35;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn-go{margin-top:6px;font-size:12.5px;font-weight:800;opacity:.9;transition:transform .2s}.bn-t:hover .bn-go{transform:translateX(4px)}
.bn-big{padding:28px}.bn-big h3{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}.bn-big p{font-size:15.5px;max-width:34ch;-webkit-line-clamp:3}
.bn-tall h3{font-size:clamp(22px,2.4vw,28px)}.bn-tall p{-webkit-line-clamp:4}
.bn-wide{min-height:150px;padding:22px 26px}.bn-wide h3{font-size:24px}
/* v198: photo tiles. The six top tiles use a real picture (--ph) with a colour gradient rising from the bottom so text stays readable. */
.bn-ph::after{background:var(--ph) center/cover no-repeat;opacity:1;-webkit-mask-image:none;mask-image:none}
.bn-ph::before{z-index:0;background:linear-gradient(to top,color-mix(in srgb,var(--c) 62%,#000) 0,color-mix(in srgb,var(--c) 38%,transparent) 38%,transparent 78%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px)}
.bn-ph>*{position:relative;z-index:1}
.bn-ph:hover::after{opacity:1;transform:scale(1.04)}
.bn-big::after,.bn-tall::after{opacity:1;background-size:cover;background-position:center}
.bn-tall.bn-ph::after{background-position:50% 30%}
.bn-sm .bn-t:first-child::after{background-position:center}
.bn-wide.bn-ph::after{background-position:center 30%}
.bn-big h3,.bn-tall h3{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.bn-car{position:relative}
.bn-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px;scroll-behavior:smooth}.bn-track::-webkit-scrollbar{display:none}
.bn-track .bn-t{flex:0 0 calc((100% - 56px)/5);aspect-ratio:1/1.12;scroll-snap-align:start;padding:16px;border-radius:20px}.bn-track .bn-t h3{font-size:16px}
.bn-ar{position:absolute;top:50%;z-index:3;width:42px;height:42px;margin-top:-26px;border-radius:50%;border:1px solid var(--line,#e2e8e3);background:var(--card,#fff);color:var(--text,#14211a);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -8px rgba(0,0,0,.4);transition:opacity .2s,transform .2s}
.bn-ar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.bn-ar:hover:not(:disabled){transform:scale(1.08)}.bn-ar:disabled{opacity:0;pointer-events:none}
.bn-prev{left:-14px}.bn-next{right:-14px}
@media(max-width:900px){.bn{gap:12px}.bn-top{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;min-height:0;gap:12px}.bn-big{grid-column:1/3;grid-row:auto;min-height:300px}.bn-tall{grid-column:1;grid-row:auto;min-height:240px}.bn-sm{grid-column:2;grid-row:auto;gap:12px}.bn-sm .bn-t:last-child{min-height:200px}.bn-mid{grid-template-columns:1fr;gap:12px}.bn-wide{min-height:190px}.bn-t{border-radius:22px}.bn-track{gap:12px}.bn-track .bn-t{flex-basis:calc((100% - 24px)/2.3)}.bn-ar{display:none}}
@media(max-width:600px){.bn-top{grid-template-columns:1fr}.bn-big,.bn-tall,.bn-sm{grid-column:auto}.bn-big{min-height:290px;padding:22px}.bn-tall{min-height:230px}.bn-sm .bn-t{min-height:210px}.bn-big h3{font-size:34px}.bn-wide h3{font-size:22px}.bn-t{padding:18px}.bn-track{margin:0 -20px;padding:4px 20px 10px;scroll-padding-left:20px}.bn-track .bn-t{flex-basis:74%;aspect-ratio:auto;min-height:240px}}
@media(prefers-reduced-motion:reduce){.bn-t,.bn-go,.bn-ar,.bn-t::after{transition:none}.bn-t:hover,.bn-t:focus-visible{transform:none}.bn-track{scroll-behavior:auto}}
.hm-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--card,#fff);border:1px solid var(--line,#e2e8e3);border-radius:22px;padding:28px}
.hm-cta h2{margin-bottom:6px}.hm-cta p{max-width:460px}
html[data-home="min"] .ft{margin-top:44px}

/* v199: phone layout. Main tiles in 2 columns with a plain dark fade (no colour); carousel shows 3 gold cards with black text. */
@media(max-width:600px){
.bn-top{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:10px}
.bn-big{grid-column:1/3;grid-row:auto;min-height:220px}
.bn-tall{grid-column:1;grid-row:auto;min-height:0}
.bn-sm{grid-column:2;grid-row:auto;gap:10px}
.bn-sm .bn-t{min-height:150px}
.bn-mid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bn-wide{min-height:170px;padding:14px}.bn-wide h3{font-size:17px}
.bn-top .bn-t,.bn-mid .bn-t{padding:14px;border-radius:20px;border-color:rgba(255,255,255,.12);box-shadow:0 10px 20px -14px rgba(0,0,0,.6)}
.bn-big{padding:18px}.bn-big h3{font-size:30px}.bn-big p{font-size:13px}
.bn-top h3,.bn-mid h3{font-size:16px}
.bn-top p,.bn-mid p{font-size:12px;-webkit-line-clamp:2}
.bn-top .bn-k,.bn-mid .bn-k{font-size:9.5px;padding:3px 8px;letter-spacing:.05em}
.bn-top .bn-go,.bn-mid .bn-go{font-size:11.5px;margin-top:4px}
.bn-ph::before{background:linear-gradient(to top,rgba(0,0,0,.88) 0,rgba(0,0,0,.55) 40%,rgba(0,0,0,.12) 80%)}
.bn-track{gap:10px;margin:0 -20px;padding:4px 20px 10px;scroll-padding-left:20px}
.bn-track .bn-t{flex:0 0 calc((100% - 20px)/3);aspect-ratio:1/1.3;min-height:0;padding:10px;border-radius:16px;gap:4px;color:#000;border:1px solid rgba(0,0,0,.14);background:linear-gradient(150deg,#f3c845 0,#d9a416 100%);box-shadow:0 8px 16px -12px rgba(0,0,0,.5)}
.bn-track .bn-t::before{background:radial-gradient(90% 70% at 100% 0,rgba(255,255,255,.35) 0,transparent 60%)}
.bn-track .bn-t::after{filter:brightness(0);opacity:.1;-webkit-mask-image:none;mask-image:none}
.bn-track .bn-t h3{font-size:13px;color:#000;text-shadow:none}
.bn-track .bn-t p{display:none}
.bn-track .bn-t .bn-k{font-size:8.5px;padding:3px 6px;letter-spacing:.03em;background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.18);color:#000}
.bn-track .bn-t .bn-go{font-size:11px;margin-top:2px;color:#000;text-shadow:none}
.bn-track .bn-t:hover,.bn-track .bn-t:focus-visible{transform:none;box-shadow:0 0 0 2px #000}
}

/* v200: phone layout per sketch. Tiles stacked full width (Destinations taller), natural photos with a small dark fade, no colour.
   Carousel: 2 dark square cards with arrows on both sides. */
@media(max-width:600px){
.bn{gap:10px}
.bn-top{grid-template-columns:1fr;gap:10px}
.bn-big,.bn-tall,.bn-sm{grid-column:auto;grid-row:auto}
.bn-sm{grid-template-rows:none;gap:10px}
.bn-big{min-height:250px;padding:20px}.bn-tall,.bn-sm .bn-t,.bn-wide{min-height:170px}
.bn-mid{grid-template-columns:1fr;gap:10px}
.bn-top .bn-t,.bn-mid .bn-t{padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.1);box-shadow:none}
.bn-top .bn-t:hover,.bn-mid .bn-t:hover,.bn-top .bn-t:focus-visible,.bn-mid .bn-t:focus-visible{transform:none;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.bn-top h3,.bn-mid h3{font-size:22px}.bn-big h3{font-size:34px}
.bn-top p,.bn-mid p{font-size:13.5px}.bn-big p{font-size:14.5px}
.bn-top .bn-k,.bn-mid .bn-k{font-size:10.5px;padding:4px 10px;letter-spacing:.07em}
.bn-top .bn-go,.bn-mid .bn-go{font-size:12.5px}
.bn-ph::before{background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.3) 38%,rgba(0,0,0,0) 68%)}
.bn-track{gap:10px;margin:0;padding:2px 0 8px;scroll-padding-left:0}
.bn-track .bn-t{flex:0 0 calc((100% - 10px)/2);aspect-ratio:1/1;padding:16px;border-radius:20px;gap:5px;color:#fff;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#2b3038 0,#14171c 100%);box-shadow:none}
.bn-track .bn-t::before{background:none}
.bn-track .bn-t::after{filter:none;opacity:.14;-webkit-mask-image:none;mask-image:none}
.bn-track .bn-t h3{font-size:17px;color:#fff;text-shadow:none}
.bn-track .bn-t p{display:-webkit-box;font-size:12.5px;-webkit-line-clamp:2;color:rgba(255,255,255,.8)}
.bn-track .bn-t .bn-k{font-size:9.5px;padding:3px 8px;letter-spacing:.05em;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.bn-track .bn-t .bn-go{font-size:12px;color:#fff}
.bn-track .bn-t:hover,.bn-track .bn-t:focus-visible{transform:none;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.bn-ar{display:grid;width:38px;height:38px;margin-top:-23px}.bn-prev{left:-6px}.bn-next{right:-6px}
}

/* v201: (1) grid overflow fix: the carousel used to size the page to all its cards (1000px+ wide) and push the grid into the margin; columns are now minmax(0,1fr) and the carousel may shrink.
   (2) No colour on desktop either: natural photos with a small dark fade, dark neutral carousel cards. */
.bn{grid-template-columns:minmax(0,1fr)}
.bn-car,.bn-top,.bn-mid,.bn-track{min-width:0;max-width:100%}
.bn-ph::before{background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.3) 38%,rgba(0,0,0,0) 68%)}
.bn-t{border-color:rgba(255,255,255,.1);box-shadow:0 12px 24px -18px rgba(0,0,0,.6)}
.bn-t:hover,.bn-t:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.6),0 18px 30px -18px rgba(0,0,0,.6)}
.bn-track .bn-t{background:linear-gradient(160deg,#2b3038 0,#14171c 100%)}
.bn-track .bn-t::before{background:none}
.bn-track .bn-t::after{opacity:.16}
@media(max-width:600px){.bn-prev{left:6px}.bn-next{right:6px}}
.bn-t.bn-ph{background:#15181d;border-color:rgba(255,255,255,.1)}
.bn-ph::before{background:linear-gradient(to top,rgba(0,0,0,.8) 0,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 78%)}

/* v254: "More to explore" carousel restyled: medium simple cards, one thin line icon on a soft tint, short label and one line of text.
   6 cards per view on desktop, 4 on tablet, 3 on phones. Colours still come from each tile's --c1 / --c2. */
.wz-car{position:relative}
.wz-grid{display:flex;gap:14px;margin-top:20px;padding:4px 2px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}.wz-grid::-webkit-scrollbar{display:none}
.wz-grid>.wz{flex:0 0 calc((100% - 70px)/6);scroll-snap-align:start}
.wz{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 10px 16px;min-width:0;text-decoration:none;color:var(--text,#14211a);background:var(--card,#fff);border:1px solid var(--line,#e2e8e3);border-radius:18px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
.wz-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:16px;color:color-mix(in srgb,var(--c2,#14211a) 88%,#000);background:color-mix(in srgb,var(--c1,#e2e8e3) 20%,var(--card,#fff));transition:background .18s ease,color .18s ease}
.wz-ic svg{width:28px;height:28px}
.wz:hover,.wz:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c2,#14211a) 55%,var(--line,#e2e8e3));box-shadow:0 10px 22px -14px color-mix(in srgb,var(--c2,#14211a) 70%,transparent)}
.wz:hover .wz-ic,.wz:focus-visible .wz-ic{background:var(--c2,#14211a);color:#fff}
.wz:focus-visible{outline:2px solid var(--c2,#1d6bff);outline-offset:2px}
.wz b{font-size:15px;font-weight:700;line-height:1.2;letter-spacing:0}
.wz small{font-size:12.5px;line-height:1.35;color:var(--muted,#5b6b62);max-width:20ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wz-ar{position:absolute;top:50px;z-index:3;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:1px solid var(--line,#e2e8e3);background:var(--card,#fff);color:var(--text,#14211a);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px -6px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.wz-ar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.wz-ar:hover:not(:disabled){transform:scale(1.08)}.wz-ar:disabled{opacity:0;pointer-events:none}.wz-prev{left:-12px}.wz-next{right:-12px}
.wz-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}.wz-dots button{width:6px;height:6px;padding:0;border-radius:99px;border:0;background:var(--line,#cfd8d2);cursor:pointer;transition:width .2s,background .2s}.wz-dots button[aria-current=true]{width:18px;background:var(--gold,#c9a227)}
@media(max-width:900px){.wz-grid{gap:12px}.wz-grid>.wz{flex-basis:calc((100% - 36px)/4)}.wz-prev{left:-6px}.wz-next{right:-6px}}
@media(max-width:600px){.wz-grid{gap:10px;margin:18px -20px 0;padding:4px 20px 12px;scroll-padding-left:20px}.wz-grid>.wz{flex-basis:30%;padding:14px 6px 12px;border-radius:16px}.wz-ar{display:none}.wz-ic{width:46px;height:46px;border-radius:14px}.wz-ic svg{width:24px;height:24px}.wz b{font-size:13px}.wz small{display:none}}
@media(prefers-reduced-motion:reduce){.wz,.wz-ic{transition:none}.wz:hover,.wz:focus-visible{transform:none}}

/* v254: Davao Times tile always uses the supplied Davao plaza portrait as its background (a soft dark fade keeps the text readable). */
.bn-tall.bn-ph[href="/news/"]::after{background:var(--ph) var(--php,40% 18%)/cover no-repeat;opacity:1;-webkit-mask-image:none;mask-image:none}
.bn-tall.bn-ph[href="/news/"]::before{background:linear-gradient(to top,rgba(0,0,0,.82) 0,rgba(0,0,0,.5) 30%,rgba(0,0,0,.08) 62%,rgba(0,0,0,0) 100%)}