/* Lungsod Core block styles (premium editorial). Uses theme presets when present, fallbacks otherwise. */

:root{--ls-ink:var(--wp--preset--color--ink,#0b0b0c);--ls-muted:var(--wp--preset--color--muted,#5f5b55);--ls-rule:var(--wp--preset--color--line,#d9d4cb);--ls-accent:var(--wp--preset--color--accent,#7a1f2b);--ls-serif:var(--wp--preset--font-family--serif,Georgia,serif);--ls-sans:var(--wp--preset--font-family--sans,system-ui,sans-serif)}

/* Section colours: --ls-c is the section's readable text colour (used for the tag word only). */
.ls-line-move{--ls-c:var(--wp--preset--color--move,#1e4f82)}
.ls-line-food{--ls-c:var(--wp--preset--color--food,#9a330a)}
.ls-line-design{--ls-c:var(--wp--preset--color--design,#5a3290)}
.ls-line-place{--ls-c:var(--wp--preset--color--place,#066147)}
.ls-line-events{--ls-c:var(--wp--preset--color--events,#7a4f00)}

/* Section tag: the section name as a small word in its colour. */
.ls-section{display:inline-flex;align-items:center;color:var(--ls-c,var(--ls-ink));font-family:var(--ls-sans);font-size:.8125rem;font-weight:600;line-height:1.2;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
a.ls-section:hover{text-decoration:underline;text-underline-offset:.2em}
.ls-section-label{margin:0}

/* Byline: writer, date and reading time, separated by thin vertical rules; optional avatar. */
.ls-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;margin:0;font-family:var(--ls-sans);font-size:.8125rem;line-height:1.4;color:var(--ls-muted)}
.ls-byline>span+span::before{content:"";display:inline-block;width:1px;height:.8em;margin-right:.7rem;background:currentColor;opacity:.45;vertical-align:-.05em}
.ls-byline__writer{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:var(--ls-ink)}
.ls-byline__avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover}
.ls-byline a{color:inherit;text-decoration:none}
.ls-byline a:hover{text-decoration:underline}

/* Cards: shared parts. The whole card is the link (title link stretched over it). Hover underlines only. */
.ls-card{position:relative;display:flex;flex-direction:column;gap:1rem;height:100%}
.ls-card__media{margin:0;overflow:hidden;background:var(--wp--preset--color--surface,#f1eee7)}
.ls-card .ls-card__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ls-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.ls-card__section{margin:0}
.ls-card__title{margin:0;font-family:var(--ls-serif);font-size:1.375rem;font-weight:500;line-height:1.16;letter-spacing:-.01em}
.ls-card__title a{color:inherit;text-decoration:none}
.ls-card__title a::after{content:"";position:absolute;inset:0}
.ls-card:hover .ls-card__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.ls-card:focus-within{outline:2px solid var(--ls-accent);outline-offset:6px}
.ls-card__title a:focus-visible{outline:none}
.ls-card__standfirst{margin:0;font-family:var(--ls-serif);font-size:1.125rem;font-style:italic;line-height:1.45;color:var(--ls-muted)}
.ls-card .ls-byline{margin-top:auto}
.ls-card--card .ls-card__media{aspect-ratio:3/2}

/* Cover: the home lead. Large photo beside a big serif headline and italic standfirst. */
.ls-card--cover,.ls-card--feature{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
.ls-card--cover .ls-card__media,.ls-card--feature .ls-card__media{aspect-ratio:4/3}
.ls-card--cover .ls-card__body,.ls-card--feature .ls-card__body{gap:1rem}
.ls-card--cover .ls-card__title,.ls-card--feature .ls-card__title{font-size:clamp(2.25rem,1.4rem + 3.4vw,4.25rem);font-weight:400;line-height:1.02;letter-spacing:-.025em;max-width:16ch}
.ls-card--cover .ls-card__standfirst,.ls-card--feature .ls-card__standfirst{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);max-width:38ch}
.ls-card--cover .ls-byline{margin-top:.5rem}
@media (min-width:1000px){
.ls-card--cover,.ls-card--feature{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3.5rem}
.ls-card--cover .ls-card__media,.ls-card--feature .ls-card__media{aspect-ratio:5/4}
}

/* Feature: the cover on a black band. Section colours are too dark on black, so the tag goes light. */
.ls-card--feature{color:#fff}
.ls-card--feature .ls-card__title,.ls-card--feature .ls-card__title a{color:#fff}
.ls-card--feature .ls-card__standfirst{color:#d6d1c8}
.ls-card--feature .ls-section{color:#fff}
.ls-card--feature .ls-byline,.ls-card--feature .ls-byline__writer{color:#d6d1c8}
.ls-card--feature .ls-byline__writer{color:#fff}
.ls-card--feature:focus-within{outline-color:#fff}
@media (min-width:1000px){.ls-card--feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.ls-card--feature .ls-card__media{order:2}}

/* Overlay: headline over the photo on a dark gradient (for custom layouts). */
.ls-card--overlay{min-height:24rem;justify-content:flex-end;overflow:hidden;color:#fff;background:#0b0b0c}
.ls-card--overlay .ls-card__media{position:absolute;inset:0}
.ls-card--overlay .ls-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 35%,rgba(11,11,12,.6) 62%,rgba(11,11,12,.92) 100%)}
.ls-card--overlay .ls-card__body{position:relative;z-index:1;padding:clamp(1.25rem,3vw,2.25rem)}
.ls-card--overlay .ls-card__title{font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:400;line-height:1.05;max-width:22ch}
.ls-card--overlay .ls-card__title,.ls-card--overlay .ls-card__title a,.ls-card--overlay .ls-section,.ls-card--overlay .ls-byline__writer{color:#fff}
.ls-card--overlay .ls-card__standfirst,.ls-card--overlay .ls-byline{color:#e4e0d8}

/* Text: no photo, set off by a rule above. */
.ls-card--text{padding-top:1rem;border-top:1px solid var(--ls-ink)}

/* Compact: small photo beside the headline. */
.ls-card--compact{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:start}
.ls-card--compact .ls-card__media{aspect-ratio:1}
.ls-card--compact .ls-card__title{font-size:1.125rem}

/* Cover block: the lead across the top, then four cards in a row divided by thin column rules. */
.ls-bento{display:grid;gap:2rem;grid-template-columns:1fr}
.ls-bento__tile{min-width:0}
.ls-bento__tile--0{padding-bottom:2rem;border-bottom:1px solid var(--ls-ink)}
@media (min-width:640px){
.ls-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.5rem}
.ls-bento__tile--0{grid-column:1/-1;padding-bottom:2.5rem}
}
@media (min-width:1000px){
.ls-bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 3rem}
/* Column rules sit in the middle of the gap, so every card keeps the same width. */
.ls-bento__tile:not(.ls-bento__tile--0):not(.ls-bento__tile--1){position:relative}
.ls-bento__tile:not(.ls-bento__tile--0):not(.ls-bento__tile--1)::before{content:"";position:absolute;top:0;bottom:0;left:-1.5rem;border-left:1px solid var(--ls-rule)}
.ls-bento__tile:not(.ls-bento__tile--0) .ls-card__title{font-size:1.25rem}
}
@media (max-width:639px){
.ls-bento{gap:0}
.ls-bento__tile:not(.ls-bento__tile--0){padding:1.25rem 0;border-bottom:1px solid var(--ls-rule)}
.ls-bento__tile--1{padding-top:1.5rem!important}
.ls-bento__tile:not(.ls-bento__tile--0) .ls-card--card{display:grid;grid-template-columns:minmax(0,1fr) 6rem;gap:1rem;align-items:start}
.ls-bento__tile:not(.ls-bento__tile--0) .ls-card--card .ls-card__media{order:2;aspect-ratio:1}
.ls-bento__tile:not(.ls-bento__tile--0) .ls-card__title{font-size:1.1875rem}
}
/* Small cards: writer and date only, so the byline stays on one line. */
.ls-bento__tile:not(.ls-bento__tile--0) .ls-byline__time{display:none}

/* Story grids and rails. Wide rails get thin column rules like a printed page. */
.ls-stories{display:grid;gap:2.25rem 2rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
.ls-stories>li{min-width:0}
@media (min-width:640px){.ls-stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
.ls-stories--cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.ls-stories--rail{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem 3rem}
.ls-stories--rail>li+li{position:relative}
.ls-stories--rail>li+li::before{content:"";position:absolute;top:0;bottom:0;left:-1.5rem;border-left:1px solid var(--ls-rule)}
.ls-stories--rail .ls-card__title{font-size:1.25rem}
}
@media (max-width:639px){
.ls-stories--cards{gap:0}
.ls-stories--cards>li{padding:1.25rem 0;border-bottom:1px solid var(--ls-rule)}
.ls-stories--cards>li:first-child{padding-top:0}
.ls-stories--cards .ls-card--card{display:grid;grid-template-columns:minmax(0,1fr) 6rem;gap:1rem;align-items:start}
.ls-stories--cards .ls-card--card .ls-card__media{order:2;aspect-ratio:1}
.ls-stories--cards .ls-card__title{font-size:1.1875rem}
.ls-stories--cards .ls-byline__time{display:none}
/* Rail: a sideways-scrolling row with snap points; the next card peeks in. */
.ls-stories--rail{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}
.ls-stories--rail::-webkit-scrollbar{display:none}
.ls-stories--rail>li{flex:0 0 78%;scroll-snap-align:start}
}
.ls-stories--list{grid-template-columns:1fr!important;gap:0}
.ls-stories--list>li{padding:1rem 0;border-top:1px solid var(--ls-rule)}
/* Rail cards are narrow: writer and date only, so bylines stay on one line. */
.ls-stories--rail .ls-byline__time{display:none}

/* Editor's picks: the editors' running order. The serif numeral sits on the title's first line, so
   each item reads as two parts only: serif number + title, then one small sans line (section, writer). */
.ls-picks{margin:0;padding:0;list-style:none;counter-reset:ls-pick}
.ls-picks__item{position:relative;counter-increment:ls-pick;display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.75rem;row-gap:.45rem;padding:1.1rem 0;border-top:1px solid var(--ls-rule)}
.ls-picks__item:first-child{border-top:0;padding-top:.25rem}
.ls-picks__item::before{content:counter(ls-pick);grid-row:1;font-family:var(--ls-serif);font-size:1.1875rem;font-weight:500;line-height:1.25;font-variant-numeric:lining-nums tabular-nums;color:var(--ls-accent)}
.ls-picks__title{grid-column:2;margin:0;font-family:var(--ls-serif);font-size:1.1875rem;font-weight:500;line-height:1.25;letter-spacing:-.005em}
.ls-picks__title a{color:inherit;text-decoration:none}
.ls-picks__title a::after{content:"";position:absolute;inset:0}
.ls-picks__item:hover .ls-picks__title a{text-decoration:underline;text-decoration-thickness:1px}
.ls-picks__meta{grid-column:2}
.ls-picks__writer{color:var(--ls-muted)}

/* Author box: between two rules, no fill. */
.ls-author{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.25rem;align-items:start;padding:1.75rem 0;border-top:1px solid var(--ls-ink);border-bottom:1px solid var(--ls-rule)}
.ls-author__photo{margin:0;width:4.5rem;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#e4dfd6}
.ls-author__photo img{display:block;width:100%;height:100%;object-fit:cover}
.ls-author__name{margin:0;font-family:var(--ls-serif);font-size:1.375rem;font-weight:500}
.ls-author__name a{color:inherit;text-decoration:none}
.ls-author__name a:hover{text-decoration:underline}
.ls-author__bio{margin:.4rem 0 0;font-size:1rem;line-height:1.6;color:var(--ls-ink)}
.ls-author__more{margin:.7rem 0 0;font-size:.875rem;font-weight:600}
.ls-author--archive{grid-template-columns:9rem minmax(0,1fr);gap:2.25rem;padding:0 0 2.5rem;border-top:0;border-bottom:1px solid var(--ls-ink);align-items:center}
.ls-author--archive .ls-author__photo{width:9rem}
.ls-author--archive .ls-author__name{font-size:clamp(2.5rem,1.5rem + 4vw,4.25rem);font-weight:400;letter-spacing:-.025em;line-height:1}
.ls-author--archive .ls-author__bio{font-family:var(--ls-serif);font-size:1.25rem;font-style:italic;max-width:52ch;color:var(--ls-muted)}
@media (max-width:599px){.ls-author--archive{grid-template-columns:5rem minmax(0,1fr);gap:1.25rem}.ls-author--archive .ls-author__photo{width:5rem}}

/* Share links: quiet underlined text links. */
.ls-share{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.25rem;font-family:var(--ls-sans);font-size:.875rem}
.ls-share__label{color:var(--ls-muted)}
.ls-share__link{color:var(--ls-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--ls-rule);text-decoration-thickness:1px;text-underline-offset:.3em}
.ls-share__link:hover,.ls-share__link:focus-visible{text-decoration-color:currentColor}

/* House ad: a boxed notice with a hairline frame, set apart from editorial content. */
.ls-ad{padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--ls-ink);background:var(--wp--preset--color--white,#fff)}
.ls-ad__label{margin:0 0 .9rem;font-size:.8125rem;font-weight:600;color:var(--ls-muted)}
.ls-ad__headline{margin:0;font-family:var(--ls-serif);font-size:clamp(1.625rem,3vw,2.25rem);font-weight:400;line-height:1.1;letter-spacing:-.015em}
.ls-ad__text{margin:.7rem 0 0;font-size:1.0625rem;line-height:1.55;color:var(--ls-muted)}
.ls-ad__action{margin:1.5rem 0 0}

/* Writers: portrait photos, serif names. */
.ls-writers{display:grid;gap:2.5rem 1.5rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
@media (min-width:1000px){.ls-writers{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 2rem}}
.ls-writer{position:relative}
.ls-writer__photo{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--wp--preset--color--surface,#f1eee7)}
.ls-writers .ls-writer__photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Space above the name, not below the photo: Elementor zeroes figure margins inside its widgets. */
.ls-writer__name{margin:1rem 0 0;font-family:var(--ls-serif);font-size:1.375rem;font-weight:500;letter-spacing:-.01em}
.ls-writer__name a{color:inherit;text-decoration:none}
.ls-writer__name a::after{content:"";position:absolute;inset:0}
.ls-writer:hover .ls-writer__name a{text-decoration:underline;text-decoration-thickness:1px}
.ls-writer:focus-within{outline:2px solid var(--ls-accent);outline-offset:6px}
.ls-writer__name a:focus-visible{outline:none}
.ls-writer__bio{margin:.4rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--ls-muted)}
.ls-writer__count{display:block;margin:.6rem 0 0;font-size:.8125rem;font-weight:600;color:var(--ls-ink)}

/* Photo caption. */
.ls-caption{margin:.75rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--ls-muted)}

/* Section links: plain text in the header strip (a short rule in the section colour under the hovered
   or current one); a stacked list in the footer. */
.ls-lines{display:flex;flex-wrap:nowrap;gap:.25rem 1.75rem;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.ls-lines::-webkit-scrollbar{display:none}
.ls-lines a{display:inline-block;padding:.7rem 0;border-bottom:2px solid transparent;color:var(--ls-ink);font-family:var(--ls-sans);font-size:.875rem;font-weight:500;white-space:nowrap;text-decoration:none}
.ls-lines a:hover,.ls-lines a[aria-current]{border-bottom-color:var(--ls-c,var(--ls-ink))}
.ls-lines-stack .ls-lines{flex-direction:column;align-items:flex-start;gap:.4rem;overflow:visible}
.ls-lines-stack .ls-lines a{padding:0;border:0;color:inherit;font-size:.9375rem;font-weight:400}
.ls-lines-stack .ls-lines a:hover{text-decoration:underline}

/* Newsletter / contact form. */
.ls-form__grid{display:grid;gap:1.25rem}
@media (min-width:600px){.ls-form__grid{grid-template-columns:1fr 1fr}.ls-form__field--wide,.ls-form__actions{grid-column:1/-1}}
.ls-form__field{display:flex;flex-direction:column;gap:.4rem;margin:0;min-width:0}
.ls-form__field label{font-size:.875rem;font-weight:600}
.ls-form__req{color:var(--ls-accent)}
.ls-form input,.ls-form select,.ls-form textarea{box-sizing:border-box;font:inherit;width:100%;padding:.85rem 1rem;border:1px solid #8a857d;border-radius:0;background:#fff;color:inherit}
.ls-form input:focus-visible,.ls-form select:focus-visible,.ls-form textarea:focus-visible{outline:2px solid var(--ls-accent);outline-offset:0;border-color:var(--ls-accent)}
.ls-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:0}
.ls-form__submit{cursor:pointer;border:0}
.ls-form__hint{font-size:.875rem;color:var(--ls-muted)}
.ls-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ls-form__notice{padding:1rem 1.25rem;margin:0 0 1.5rem;border-left:2px solid var(--ls-ink);background:var(--wp--preset--color--surface,#f1eee7)}
.ls-form__notice--error{border-left-color:var(--ls-accent)}
.ls-editor-empty{padding:1rem;border:1px dashed currentColor;opacity:.7}

/* "Latest" beside Editor's picks: two cards per row in the narrower column. */
@media (min-width:1000px){.ls-latest.ls-stories--cards,.ls-latest-widget .ls-stories--cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}}