/* =========================================================
   القرية — Alqariah  |  branches.css  (branches.html only)
   Branch cards.
   Loaded after base.css.
   ========================================================= */

/* =========================================================
   Branches page — two cards side by side (stack on mobile)
   ========================================================= */
.branches{max-width:1100px;margin:0 auto;padding:120px 24px 90px}
.branches__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.branches__grid{grid-template-columns:1fr}}

.branch-card{position:relative;display:flex;flex-direction:column;color:#fff;overflow:hidden;
  border-radius:var(--radius);box-shadow:var(--shadow);
  background:linear-gradient(160deg,var(--accent),var(--accent2));
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.branch-card--blue{--accent:var(--blue);--accent2:var(--navy)}
.branch-card--green{--accent:var(--green);--accent2:var(--green-dark)}
/* decorative bubbles for life */
.branch-card::before,.branch-card::after{content:"";position:absolute;border-radius:50%;
  background:rgba(255,255,255,.13);pointer-events:none}
.branch-card::before{width:220px;height:220px;inset-block-start:-80px;inset-inline-end:-70px}
.branch-card::after{width:140px;height:140px;inset-block-start:34%;inset-inline-start:-60px}
.branch-card:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 40px 80px -30px rgba(10,42,71,.6)}

.branch-card__body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  align-items:center;gap:16px;text-align:center;padding:38px 28px 30px}
.branch-card__name{font-size:1.55rem;font-weight:900;color:#fff;line-height:1.45}
.branch-card__hours{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.98rem;
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
  padding:.55em 1.15em;border-radius:999px}
.branch-card__hours svg{width:17px;height:17px;flex-shrink:0}

/* white location button that pops on the colored card */
.btn--branch{background:#fff;box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.btn--branch:hover{box-shadow:0 24px 44px -14px rgba(0,0,0,.55)}
.branch-card--blue .btn--branch{color:var(--blue-dark)}
.branch-card--green .btn--branch{color:var(--green-dark)}

/* horizontal photo pinned to the bottom of the box */
.branch-card__media{position:relative;z-index:1;overflow:hidden}
.branch-card__media img{width:100%;height:260px;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.branch-card:hover .branch-card__media img{transform:scale(1.06)}
/* soft fade — the card colour melts into the top of the photo so it isn't a flat block */
.branch-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--accent) 0%,
    color-mix(in srgb,var(--accent) 45%,transparent) 22%,
    transparent 52%,
    rgba(0,0,0,.28) 100%)}
@media(max-width:760px){.branch-card__media img{height:220px}}