/* Masinloc Connect Marketplace — a directory, styled as one.

   The job is narrow: somebody wants a coffee or a caterer, and needs to find
   the business and reach it — which here means its Facebook page, because this
   directory publishes no phone numbers. Everything serves that and nothing
   else. No ratings, no badges, no follower counts, no "popular near you" —
   none of that is backed by data this site has, and inventing it would be
   lying in CSS.

   Three decisions govern the file.

   It borrows rather than invents. The palette, type stacks and spacing rhythm
   and the light .about-page shell all come from the existing system, so a
   visitor moving between here and Discover should not feel they have changed
   websites.

   And the directory is a list, not a grid of cards. Each business is a row —
   mark, then who and where, then what they do — separated by one hairline and
   a lot of air. Hierarchy comes from the scale of the logo against the type,
   not from giving every entry a box, a shadow and a rounded corner. That reads
   as a directory somebody edits rather than a shop somebody stocks, and it
   holds at two entries and at two hundred.

   And nothing is set in capitals. Category names, buttons, breadcrumbs and
   labels all read in the case they were written in; the only capitals on the
   page are the ones inside a name or inside a business's own logo. Lowercase
   sits smaller than caps at the same size, so each of these labels gained a
   point and gave back the wide tracking that was holding the caps apart.
   scripts/check-design-consistency.py enforces this for this file.
*/

:root{
  --mk-wide:1180px;
  --mk-measure:62ch;
}

.mk-hero,.mk-results,.mk-submit,.mk-detail{
  max-width:var(--mk-wide);
  margin:0 auto;
  padding-left:clamp(18px,4vw,40px);
  padding-right:clamp(18px,4vw,40px);
}

/* Breadcrumbs. Every stylesheet that needs these carries its own copy —
   bulletin.css and contact.css both do — and this page loads neither. */
.crumbs{max-width:var(--mk-wide);margin:0 auto;padding:clamp(18px,3vw,28px) clamp(18px,4vw,40px) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font:500 12.5px/1.4 var(--font-ui);letter-spacing:.01em}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

/* ------------------------------------------------------------------ hero -- */

.mk-hero{padding-top:clamp(22px,3vw,34px);padding-bottom:clamp(28px,4vw,42px)}
.mk-hero h1{
  margin:0 0 14px;
  color:var(--navy);
  font:400 clamp(34px,5.4vw,60px)/1.04 var(--font-editorial);
  letter-spacing:-.03em;
  text-wrap:balance;
}
.mk-lead{
  margin:0;
  max-width:var(--mk-measure);
  color:var(--text);
  font:400 clamp(16px,1.6vw,18.5px)/1.62 var(--font-ui);
}

/* ---------------------------------------------------------------- search -- */

.mk-search{margin:clamp(24px,3.4vw,34px) 0 0;max-width:560px}
.mk-search input{
  width:100%;
  box-sizing:border-box;
  /* 16px is the floor at which iOS stops zooming the viewport on focus. */
  font:400 16px/1.4 var(--font-ui);
  color:var(--ink);
  background:var(--white);
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color var(--ease),box-shadow var(--ease);
}
.mk-search input::placeholder{color:var(--muted)}
.mk-search input:hover{border-color:#BFC8D8}
.mk-search input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(13,59,158,.14);
}

.mk-filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.mk-chip{
  font:600 12.5px/1 var(--font-ui);
  letter-spacing:.02em;
  color:var(--text);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  /* Tall enough to be a comfortable touch target on a phone. */
  padding:11px 15px;
  cursor:pointer;
  transition:border-color var(--ease),background var(--ease),color var(--ease);
}
.mk-chip:hover{border-color:#BFC8D8}
.mk-chip.is-on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.mk-chip:focus-visible{outline:3px solid rgba(13,59,158,.45);outline-offset:2px}

/* --------------------------------------------------------------- results -- */

.mk-results{padding-bottom:clamp(48px,6vw,72px)}
.mk-count{
  margin:0 0 8px;
  color:var(--muted);
  font:600 12.5px/1.4 var(--font-ui);
  letter-spacing:.01em;
}

/* The directory is a list of entries, not a grid of cards.

   Each row reads left to right the way somebody scans a printed directory:
   the mark, then who and where, then what they do. Rows are separated by a
   single hairline and a lot of vertical air — no boxes, no borders on four
   sides, no shadow. With two entries or two hundred that stays quiet and
   scannable, and it lets the logos be the only strong shapes on the page.

   The first track is fixed so every mark lands on the same left edge and the
   column reads as a column. The last two are proportional, with the
   description given the wider share because it is the only part that is
   prose. */
.mk-list{list-style:none;margin:0;padding:0}
.mk-item{border-top:1px solid var(--line)}
.mk-item[hidden]{display:none}
.mk-item>a{
  display:grid;
  grid-template-columns:168px minmax(190px,0.9fr) minmax(0,1.35fr);
  gap:clamp(22px,3.4vw,52px);
  align-items:start;
  padding:clamp(28px,3.6vw,44px) 0;
  text-decoration:none;
  color:inherit;
}
.mk-item>a:hover .mk-name{color:var(--blue)}
.mk-item>a:hover .mk-more{text-decoration:underline}
.mk-item>a:focus-visible{outline:3px solid rgba(13,59,158,.45);outline-offset:6px}

/* The logo. No frame, no circle, no chip — it sits on the page at its own
   proportions with room around it, and it is by a wide margin the largest
   thing in the row. object-fit:contain keeps a non-square mark honest if one
   ever arrives. */
.mk-logo{
  display:grid;place-items:center;
  width:168px;height:168px;
}
.mk-logo picture{display:block;width:100%;height:100%}
.mk-logo img{display:block;width:100%;height:100%;object-fit:contain}

/* The placeholder for a business with no mark. Initials in the editorial
   face, no container, no colour — a considered absence rather than an
   invented logo. */
.mk-logo-none{
  color:var(--line);
  font:400 clamp(46px,5vw,62px)/1 var(--font-editorial);
  letter-spacing:.02em;
}
/* Drawn, not written: the initials live in data-mono so they never appear in
   the document text next to the business name. */
.mk-logo-none::before{content:attr(data-mono)}

.mk-ident{display:block;min-width:0;padding-top:6px}
.mk-name{
  display:block;margin:0 0 12px;
  color:var(--navy);
  font:400 clamp(23px,2.5vw,30px)/1.14 var(--font-editorial);
  letter-spacing:-.02em;
  transition:color var(--ease);
}
.mk-meta{display:block;min-width:0}
.mk-meta-cat{
  color:var(--blue);
  font:700 12.5px/1.5 var(--font-ui);
  letter-spacing:.01em;
}
/* Category and location answer one question together, so they sit on one
   line joined by a middot rather than stacking into two labels. */
.mk-meta-loc::before{content:"·";margin:0 9px;color:var(--muted)}
.mk-meta-loc{color:var(--muted);font:400 13.5px/1.6 var(--font-ui)}

.mk-about{display:block;min-width:0;padding-top:8px}
.mk-desc{
  display:block;margin:0 0 14px;
  color:var(--text);
  font:400 15.5px/1.72 var(--font-ui);
  max-width:52ch;
}
.mk-more{
  display:block;
  color:var(--blue);
  font:700 13px/1 var(--font-ui);
  letter-spacing:.005em;
}

.mk-empty{
  margin:0;padding:34px 0 0;
  border-top:1px solid var(--line);
  color:var(--text);
  font:400 16px/1.6 var(--font-ui);
}

/* ---------------------------------------------------------------- submit -- */

.mk-submit{
  padding-top:clamp(40px,5vw,60px);
  padding-bottom:clamp(56px,7vw,88px);
  border-top:1px solid var(--line);
}
.mk-submit h2{
  margin:0 0 12px;color:var(--navy);
  font:400 clamp(26px,3.2vw,38px)/1.1 var(--font-editorial);
  letter-spacing:-.028em;
}
.mk-submit p{margin:0 0 22px;max-width:var(--mk-measure);color:var(--text);
  font:400 15.5px/1.7 var(--font-ui)}
.mk-submit-cta,.mk-detail-cta{
  display:inline-block;
  background:var(--navy);color:var(--white);
  font:700 14px/1 var(--font-ui);letter-spacing:.005em;
  padding:16px 26px;border-radius:10px;text-decoration:none;
  transition:background var(--ease);
}
.mk-submit-cta:hover,.mk-detail-cta:hover{background:var(--navy-deep)}
.mk-submit-cta:focus-visible,.mk-detail-cta:focus-visible{
  outline:3px solid rgba(13,59,158,.45);outline-offset:3px}

/* ---------------------------------------------------------------- detail -- */

.mk-detail{padding-top:clamp(16px,2.4vw,26px);padding-bottom:clamp(56px,7vw,88px)}
.mk-detail-head{max-width:var(--mk-measure)}
/* The mark leads the page, at the same scale it commands in the listing and
   with no frame around it — same reasoning as .mk-logo. */
.mk-detail-media{
  margin:0 0 22px;width:200px;height:200px;
  display:grid;place-items:center;
}
.mk-detail-media picture{display:block;width:100%;height:100%}
.mk-detail-media img{display:block;width:100%;height:100%;object-fit:contain}
.mk-detail-mark{
  display:grid;place-items:center;
  width:200px;height:200px;margin:0 0 22px;
  color:var(--line);
  font:400 clamp(56px,7vw,76px)/1 var(--font-editorial);letter-spacing:.02em;
}
.mk-detail h1{
  margin:0 0 16px;color:var(--navy);
  font:400 clamp(32px,4.6vw,52px)/1.06 var(--font-editorial);
  letter-spacing:-.03em;text-wrap:balance;
}
.mk-detail-desc{
  margin:0 0 26px;color:var(--text);
  font:400 clamp(16px,1.7vw,18.5px)/1.65 var(--font-ui);
}

.mk-facts{
  margin:clamp(34px,4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
  max-width:820px;
}
.mk-fact{padding-top:16px;border-top:1px solid var(--line);min-width:0}
.mk-fact dt{
  margin:0 0 7px;color:var(--muted);
  font:600 12.5px/1.3 var(--font-ui);letter-spacing:.01em;
}
.mk-fact dd{margin:0;color:var(--ink);font:400 15px/1.6 var(--font-ui);overflow-wrap:anywhere}
.mk-fact a{color:var(--blue)}

.mk-back{margin:clamp(38px,5vw,54px) 0 0}
.mk-back a{color:var(--blue);font:700 13.5px/1 var(--font-ui);
  letter-spacing:.005em;text-decoration:none}
.mk-back a:hover{text-decoration:underline}

/* ------------------------------------------------------------ responsive -- */

/* The row does not compress, it reflows. Below 720px the three tracks become
   one column in reading order — logo, name, category and location, then the
   description — and the mark stays deliberately large. A directory whose
   logos shrink to thumbnails on a phone has given up the thing that made it
   worth scanning. */
@media(max-width:720px){
  .mk-detail-media,.mk-detail-mark{width:150px;height:150px}
  .mk-item>a{
    grid-template-columns:1fr;
    gap:16px;
    padding:clamp(26px,6vw,34px) 0;
  }
  .mk-logo{width:132px;height:132px}
  .mk-ident,.mk-about{padding-top:0}
  .mk-name{margin-bottom:8px}
  .mk-desc{max-width:none;margin-bottom:12px}
}

@media(max-width:640px){
  .mk-facts{grid-template-columns:1fr;gap:20px}
  /* A row of chips that wraps to three lines pushes the results off a phone
     screen entirely, so they scroll sideways in their own strip instead. */
  .mk-filters{
    flex-wrap:nowrap;overflow-x:auto;
    margin-left:calc(clamp(18px,4vw,40px)*-1);
    margin-right:calc(clamp(18px,4vw,40px)*-1);
    padding:2px clamp(18px,4vw,40px);
    scrollbar-width:none;
  }
  .mk-filters::-webkit-scrollbar{display:none}
  /* 44px is the smallest comfortable touch target; the desktop padding leaves
     these at 37, which is a fiddly tap on the one filter row that matters. */
  .mk-chip{flex:0 0 auto;padding-top:14px;padding-bottom:14px}
  .mk-submit-cta,.mk-detail-cta{display:block;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .mk-item>a,.mk-name,.mk-chip,.mk-search input,.mk-submit-cta,.mk-detail-cta{transition:none}
}

/* Where a business sits in Masinloc. One paragraph and, where there is a real
   one, a link to the page about the place its own address names. */
.mk-context{
  max-width:var(--mk-measure);
  margin:clamp(34px,4.5vw,50px) 0 0;
  padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line);
}
.mk-context h2{
  margin:0 0 12px;color:var(--navy);
  font:400 clamp(19px,2.1vw,24px)/1.2 var(--font-editorial);
  letter-spacing:-.02em;
}
.mk-context p{margin:0;color:var(--text);font:400 15px/1.7 var(--font-ui)}
.mk-context-links{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.mk-context-links a{color:var(--blue);font:600 14px/1.5 var(--font-ui)}
.mk-context-links a:hover{text-decoration:underline}