/* ===================================================================== KlinikPlus – TABLET-ONLY layout sheet --------------------------------------------------------------------- Range: 768px – 1199.98px (Bootstrap's `md` + `lg` bands). • <= 767px — phones. NOT touched. Every rule here starts at 768px, so the 375 / 414 phone rendering is bit-for-bit what it was before this file existed. • >= 1200px — laptop & desktop. NOT touched, for the same reason: every rule stops at 1199.98px, so 1280 / 1440 / 1920 / 2560 keep rendering exactly as before. Loaded LAST in layout/header.blade.php — after klinikplus.css, updated.css and every `*-mobile.css` sheet — so it out-cascades them inside the tablet band without needing `!important` everywhere. Two sub-bands, because the site changes layout engine at 992px: A) 768–991.98px the `*-mobile.css` sheets are still active, so the page uses the STACKED mobile layout. It is correct, just stretched: 95–125 character lines, phone-sized art blown up to 900px tall, single-column forms. Fixes here reflow that column to tablet proportions. B) 992–1199.98px the DESKTOP layout is active and broadly works. Fixes here are trims only — measure, art size and section rhythm. ===================================================================== */ /* ===================================================================== SHARED — 768px to 1199.98px ===================================================================== */ @media (min-width: 768px) and (max-width: 1199.98px) { /* ----------------------------------------------------------------- Site update banner The banner text sits outside `.klinikplus-container`, so it ran the full width of the tablet: ~123ch at 820px and ~131ch at 1100px. Cap it to a readable measure and keep it centred in the bar. 34em, matching the paragraph cap below — see the note there for why not `ch`. ----------------------------------------------------------------- */ .site-update-banner__text { max-width: 34em; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------- FAQ accordion The list is the widest single element on most pages (863px at 1100px, 681px at 820px). Question + answer read better in a narrower column, and the accordion stays centred under its heading. ----------------------------------------------------------------- */ .faq-list { max-width: 720px; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------- CONTACT PAGE HEADING — CENTRED Centred on request, alongside the About hero heading in band A. This one is in the shared block rather than the portrait band because it works at both ends of it: `.contact-heading` is the only thing inside `.contact-heading-container`, and it is already full width (688px at 768, 982px at 1024), so centring the text needs nothing but the one declaration and looks deliberate at either width. The About heading is portrait-only for the opposite reason — see the note on it below. The container states `text-align: left` in contact.css, but that only reaches the heading by inheritance, and a rule set directly on the element beats an inherited value whatever its weight. The three `.contact-info-title` headings and the `.contact-form- title` above the form are left where they are: they label an icon row and a form panel, not the page. ----------------------------------------------------------------- */ .contact-heading { text-align: center; } } /* ===================================================================== BAND A — TABLET PORTRAIT, 768px to 991.98px (iPad 768 · iPad Air 820 · iPad Pro 11in 834 · Surface 912) The mobile sheets are active here; these rules stop them stretching. ===================================================================== */ @media (min-width: 768px) and (max-width: 991.98px) { /* ----------------------------------------------------------------- 1) READING COLUMN The mobile layout stacks everything into one column. At 820px that column was 778px wide, which put body copy at 95–107 characters a line — roughly 40% over a comfortable measure. Capping the shared container at 720px pulls every page back to 63–82ch and leaves an even gutter on both sides, so the stacked layout reads as a deliberate tablet column instead of a blown-up phone. Full-bleed section backgrounds are unaffected — they live on the
, not on the container. At 768px the cap is a no-op (736px of content already fits inside it), so the narrow end of the band is untouched. ----------------------------------------------------------------- */ .klinikplus-container { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } /* Three rules already pin the container wider with `!important` on a two-class selector, which out-ranks the 0,1,0 rule above: about.css:11 .klinikplus-about-page .klinikplus-container about.css:200 .stats-section .klinikplus-container about.css:385 .join-us-section-wrapper .klinikplus-container Matching their weight is the only way to reach those pages. The remaining page wrappers are listed alongside so the cap survives if one of them grows its own container rule later. */ .klinikplus-about-page .klinikplus-container, .klinikplus-home-page .klinikplus-container, .klinikplus-service-page .klinikplus-container, .klinikplus-pricing-page .klinikplus-container, .klinikplus-custom-package-page .klinikplus-container, .klinikplus-package-summary-page .klinikplus-container, .klinikplus-checkout-page-new .klinikplus-container, .stats-section .klinikplus-container, .join-us-section-wrapper .klinikplus-container { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 16px !important; padding-right: 16px !important; } /* ----------------------------------------------------------------- 1b) BODY COPY FILLS THE COLUMN This band used to cap `.klinikplus-container p` at `34em` to hold body copy near a 68-character measure. That was reverted on request: at 768px it left `.transforming-text` 544px wide inside a 712px box — 168px of empty page down the right of every body paragraph, on every page. Removing the cap alone was not enough. Several sections flatten their columns with `display: contents` into a column-flex row that carries Bootstrap's `align-items-center`. A flex item under `align-items: center` is sized to its content instead of being stretched, so those paragraphs kept only as much width as their longest hard-broken line and then sat centred in the leftover space: the About hero standfirst measured 149px inside a 712px column, 281px in from each side, while the heading above it started hard left. The cap had been hiding this behind an `align-self: start`. `stretch` restores the normal full-width sizing for exactly those paragraphs and is inert everywhere else — it only ever acts on a flex or grid child, which nearly no paragraph on the site is, and each one's own `text-align` still decides how the text sits inside the full-width box. Checked first that no paragraph carries a background or a border, so a taller box cannot paint anything new. `__capcheck()` in js/_tablet-audit.js was written to police the old cap. It now reports `cap ok` trivially — nothing is narrowed for it to misplace — so `__fill()` in that file replaces it as the guard for this rule. ----------------------------------------------------------------- */ .klinikplus-container p { align-self: stretch; } /* ----------------------------------------------------------------- 1c) ABOUT HERO HEADING — CENTRED Centred on request, and it takes both declarations. `text-align` alone would do nothing useful here. The About hero row carries Bootstrap's `align-items-center`, a vertical instruction while the row is a row; about-mobile.css flips the row to `flex-direction: column` to reorder the hero, and from then on the same declaration centres horizontally instead. That left the heading as a shrink-wrapped box floating 260px in from both edges — the text looked roughly centred, but the box was only as wide as "About Us", so a heading that wraps to two lines would set its lines hard left inside that narrow box rather than centring them. `align-self: stretch` gives the heading the full column back, and `text-align: center` then centres the text inside it properly, at any length and any wrap. It is also how every other section heading on the page is already set: who-we-are, our-story, team, partners, how-it-works and FAQ all compute to `center` — this hero was the one that did not. Only the heading is stretched, not the row — `align-items: stretch` on the row would also blow the CTA pills out to the full width. Portrait band only. From 992px the hero is a real two-column layout again (heading and copy in a 503px left column, photo beside it at 519..998), where a centred heading over three left-aligned paragraphs would read as a mistake. ----------------------------------------------------------------- */ .about-hero-section .about-heading { align-self: stretch; text-align: center; } /* ----------------------------------------------------------------- 1d) TEAM SLIDER — TWO CARDS PER VIEW The team photos were losing their heads on a tablet, and the cause is the shape of the window rather than the photo. stats-team-mobile.css and home-mobile.css both set `.team-card-scroll` to `flex: 0 0 100%` below 992px, so one card fills the whole track — sensible on a phone. On a tablet that same card stretches to 688px while `.team-member-image` keeps its fixed 398px height, giving a 1.73 landscape window. The photos are portrait, and `object-fit: cover` scales to fill the wider side: for a square source only 58% of its height survived, cropped equally top and bottom, which takes the top of the head off. Half the track each restores a portrait window (334x398 at 768px, ratio 0.84) and with it the whole subject: a square source now keeps all of its height and loses a little off the sides instead, and a 3:4 portrait keeps 89%. It also matches what the desktop slider does — 325px cards, a 325x309 window — rather than inventing a tablet-only crop. No JS change needed: team-slider.js takes its scroll step from `firstCard.offsetWidth + gap`, so the arrows still advance exactly one card. Both selectors again: stats-team-mobile.css states its `flex` at 0,1,0 and home-mobile.css states the homepage's at 0,2,0, both with `!important`, so each weight has to be answered in kind. ----------------------------------------------------------------- */ .team-scroll-wrapper, .klinikplus-home-page .team-scroll-wrapper { gap: 20px !important; } .team-card-scroll, .klinikplus-home-page .team-card-scroll { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; } /* ----------------------------------------------------------------- 2) ART DIRECTION Hero and feature art is sized for a desktop half-column. Stacked full-width on a tablet it took over the screen: the homepage doctor ran 600x900, the About team photo 787x787 — taller than most of the viewport, so the copy under it fell below the fold. The cap is generic rather than a list of class names, because the art is not consistently classed — medical-facilitator-networking reaches its 688x1022 photo through a bare `` with no class at all, so any hand-written list would keep missing pages. Two kinds of image are excluded, both named one at a time: 1. Decorative art — absolutely positioned inside `overflow: hidden` wrappers and sized to cover a whole section. Clamping it cut the CTA's line pattern off halfway down the block it decorates. 2. `.seo-image`, absolutely positioned to fill a fixed 480x480 frame. Clamping dropped it to 480x460 and left a 20px strip of background along the bottom of its window. Both are out of flow, so neither can push content down the page — the only thing this clamp exists to stop. A selector cannot test `position`, and matching wrapper names instead is not a usable proxy: `.development-image-container` is an ordinary in-flow wrapper whose name looks identical, and a `[class*="image- container"]` exclusion un-clamped its 638x970 photo. So they are named individually, and `_tablet-audit.js` reports any clamped image that turns out to be out of flow — which is how `.seo-image` was found and how the next one would be. A bare `max-height` is safe for everything else: every oversized content image on the site sets `object-fit`, so the clamp crops or letterboxes rather than stretching. The ones that do NOT set it are listed again below and get `width: auto` to hold their ratio. The exclusions sit inside `:where()` so they add no specificity of their own — as a bare `:not()` chain they scored 0,6,1 and buried the `width: auto` rule below. A browser too old for `:where()` drops this rule entirely and simply keeps the uncapped art. ----------------------------------------------------------------- */ .klinikplus-container img:not(:where([class*="bg"], [class*="decorative"], [class*="lines"], [class*="wavy"], [class*="dots"], .seo-image)) { max-height: 460px; } /* Art with no `object-fit` of its own: clamping the height alone would stretch it, so let the width follow the ratio instead. website-development.blade.php sets `.development-image {width:100%}` in a page-embedded